0
スライダーを使用しようとしていますthisスライダー。この点に関して私は以下のコードを書いた。しかし、それは動作していません。私はCSSとJSファイルを指示通りに使いました。ここにjQueryを含める必要がありますか？誰でもこのことについて私を助けることができますか？Slickスライダーを使用
<!DOCTYPE html>
<html lang="en">
<head>
<link href='http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css' rel='stylesheet' type='text/css'>
<link href='https://vmcdn.de/bootstrap/3.3.0/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<style>
.slick-prev:before, .slick-next:before { color: black; }
.container{padding-top:50px;}
.client-text li {left:0;right:0;margin:auto;list-style:none;margin:50px;z-index:9999;color:black;}
.item{ height: 200px;}
.one {background-image: url("http://placehold.it/200&text=1"); }
.two {background-image: url("http://placehold.it/200&text=2"); }
.three {background-image: url("http://placehold.it/200&text=3"); }
.four {background-image: url("http://placehold.it/200&text=4"); }
.five {background-image: url("http://placehold.it/200&text=5"); }
.six {background-image: url("http://placehold.it/200&text=6"); }
.seven {background-image: url("http://placehold.it/200&text=7"); }
.eight {background-image: url("http://placehold.it/200&text=8"); }
.nine {background-image: url("http://placehold.it/200&text=9"); }
.ten {background-image: url("http://placehold.it/200&text=10"); }
.slick-slide{
width:230px;
margin-right: 15px;
margin-left: 15px;
}
.triangle{left:0;right:0;margin:auto;width:0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #333333 transparent transparent transparent;
}
</style>
</head>
<body>
<!-- Standard carousel where Slick calculated the best widths to fit. -->
<div class="container ">
<div class="row ">
<div id="carousel" class="carousel col-md-12 ">
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item four"></div>
<div class="item five"></div>
<div class="item six"></div>
<div class="item seven"></div>
<div class="item eight"></div>
<div class="item nine"></div>
<div class="item ten"></div>
</div>
<div class="triangle"></div>
<p class="current"></p>
<ul class="client-text">
<li>0 lorem ipsum</li>
<li>1 lorem ipsum</li>
<li>2 lorem ipsum</li>
<li>3 lorem ipsum</li>
<li>4 lorem ipsum</li>
<li>5 lorem ipsum</li>
<li>6 lorem ipsum</li>
<li>7 lorem ipsum</li>
<li>8 lorem ipsum</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"></script>
<script type="text/javascript" src="https://vmcdn.de/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>
$('#carousel').slick({
arrows: true,
slidesToShow: 3,
autoplay: true,
autoplaySpeed:2500,
speed: 500,
variableWidth: true,
onAfterChange: function(){
var cat = ($('#carousel').slickCurrentSlide()) + 1;
$('.client-text > li').hide();
$('.client-text > li:nth-child('+ cat +')').show();
}
});
$('.client-text > li').hide();
$('.client-text > li:first-child').show();
</script>
</body>
</html>