スティックな矢印が表示されない

Question

私は自分のウェブサイトの1つでSlickスライダーを使用しようとしていましたが、デモで矢印を作っているようですが、代わりにボタンのように見えて悪いです。私は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からのbutton要素を削除し、ちょうど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>