光滑的箭头没有出现

Question

我试图在我的某个网站上使用Slick滑块，但我似乎无法在演示中制作箭头，而是看起来像按钮，看起来很糟糕。我下载了slick.zip并解压缩到我的网站根目录。然后我将以下代码更改到我的网站。我所在的页面是products / 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>