我正在使用光滑的轮播插件,下一个箭头根本不起作用,而上一个箭头的工作方式与下一个箭头一样。有人能帮我吗?
<div class="slickcarousel">
<div><img src = "Nature Photos/Hope.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"></div>
<div><img src = "https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"></div>
<div><img src = "https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"></div>
<div><img src = "http://i.dailymail.co.uk/i/pix/2017/03/13/13/3E39C90700000578-4308866-image-m-5_1489410821924.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"></div>
<div><img src = "http://phototheque.pasteur.fr/images/slideshow/image-9.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"></div>
<div><img src = "Nature Photos/Hope.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"></div>
<div><img src = "https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"></div>
<div><img src = "Nature Photos/Hope.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"></div>
<div><img src = "http://phototheque.pasteur.fr/images/slideshow/image-9.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px"></div>
</div>
$('.slickcarousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
autoplay: true,
autoplaySpeed: 2000,
pauseOnHover: true
});
最佳答案
确保您正确定义了所有引用?下面的例子:
slick-theme.min.css AND slick.min.css > Load jQuery > slick.min.js
并设置宽度,如 width: 90%;
为“下一个/上一个”按钮留出一些空间
$('.slickcarousel').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
centerMode: true,
autoplay: true,
autoplaySpeed: 2000,
pauseOnHover: true
});
body {
background: black;
}
.slickcarousel {
margin: 0 auto;
padding: 15px;
width: 90%;
color: #333;
background: #419be0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="slickcarousel">
<div><img src="Nature Photos/Hope.jpg" class="img-responsive" alt="BlackProPix Photography" height="160px" width="176px"></div>
<div><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" class="img-responsive" alt="BlackProPix Photography" height="160px" width="176px"></div>
<div><img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" class="img-responsive" alt="BlackProPix Photography" height="160px" width="176px"></div>
<div><img src="http://i.dailymail.co.uk/i/pix/2017/03/13/13/3E39C90700000578-4308866-image-m-5_1489410821924.jpg" class="img-responsive" alt="BlackProPix Photography" height="160px" width="176px"></div>
<div><img src="http://phototheque.pasteur.fr/images/slideshow/image-9.jpg" class="img-responsive" alt="BlackProPix Photography" height="160px" width="176px"></div>
<div><img src="Nature Photos/Hope.jpg" class="img-responsive" alt="BlackProPix Photography" height="160px" width="176px"></div>
<div><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" class="img-responsive" alt="BlackProPix Photography" height="160px" width="176px"></div>
<div><img src="Nature Photos/Hope.jpg" class="img-responsive" alt="BlackProPix Photography" height="160px" width="176px"></div>
<div><img src="http://phototheque.pasteur.fr/images/slideshow/image-9.jpg" class="img-responsive" alt="BlackProPix Photography" height="160px" width="176px"></div>
</div>
关于jquery - 光滑的轮播下一个和上一个箭头无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44557768/