沒有出現光滑的箭頭

Question

我試圖在我的某個網站上使用滑動滑塊，但我似乎無法像演示中那樣製作箭頭，而是看起來像按鈕，看起來很糟糕。我下載了slick.zip並解壓到我的網站根目錄。然後我將下面的代碼更改到我的網站。我的網頁是產品/ spice.html，所以我會用使用參考光滑文件夾

../slick/*

代碼：

<link rel="stylesheet" type="text/css" href="../slick/slick/slick.css"/> 
<link rel="stylesheet" type="text/css" href="../slick/slick/slick-theme.css"/> 
{....} 
<button class="btn-prev">Prev</button> 
<button class="btn-next">Next</button> 
<div class="your-class"> 
    <div><img src="../img/products/spices/Cardamom.jpeg" /></div> 
    <div><img src="../img/products/spices/Cashew.jpeg" /></div> 
    <div><img src="../img/products/spices/Cinnamon.jpeg" /></div> 
    <div><img src="../img/products/spices/Cloves.jpeg" /></div> 
    <div><img src="../img/products/spices/Pepper.jpeg" /></div> 
</div> 
{....} 
<script type="text/javascript" src="../slick/slick/slick.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.your-class').slick({ 
     infinite: true, 
     slidesToShow: 2, 
     slidesToScroll: 2, 
     dots: true, 
     prevArrow: '.btn-prev', 
     nextArrow: '.btn-next' 
    }); 
}); 
</script> 

但看起來像：

Answer 1

這是因爲你已經指定了自己的箭頭元素，而這些只是普通的按鈕。如果你想在默認光滑箭頭，從你的HTML刪除按鈕元素，只是調用$.slick()不指定prevArrow和nextArrow

<link rel="stylesheet" type="text/css" href="../slick/slick/slick.css"/> 
<link rel="stylesheet" type="text/css" href="../slick/slick/slick-theme.css"/> 
{....} 
<div class="your-class"> 
    <div><img src="../img/products/spices/Cardamom.jpeg" /></div> 
    <div><img src="../img/products/spices/Cashew.jpeg" /></div> 
    <div><img src="../img/products/spices/Cinnamon.jpeg" /></div> 
    <div><img src="../img/products/spices/Cloves.jpeg" /></div> 
    <div><img src="../img/products/spices/Pepper.jpeg" /></div> 
</div> 
{....} 
<script type="text/javascript" src="../slick/slick/slick.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.your-class').slick({ 
     infinite: true, 
     slidesToShow: 2, 
     slidesToScroll: 2, 
     dots: true 
    }); 
}); 
</script>