没有出现光滑的箭头

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>