下一個光滑的旋轉木馬和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

檢查控制檯，它顯示錯誤，請添加它