下一个光滑的旋转木马和prev箭头无法正常工作

Question

我使用光滑的旋转木马插件，下一个箭头根本不工作，prev箭头正在像下一个箭头一样工作。有人能帮我吗？

<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 
       }); 

Answer 1

确保您正确定义了所有的引用？实施例下面：

油滑theme.min.css AND slick.min.css>加载的jQuery> slick.min.js

并设置宽度等width: 90%;留有一定的空间中用于Next /上一页按钮

$('.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>

Answer 2

检查控制台，它显示错误，请添加它