滑動導航的光滑傳送帶箭頭

你好，我正在嘗試使用滑塊同步選項來滑動，但無法弄清楚如何prev/next箭頭顯示在傳送帶的滑塊導航部分。我遵循的包括JS和CSS文件的步驟和複製的滑塊同步例子中的javascript：滑動導航的光滑傳送帶箭頭

$('.slider-for').slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    arrows: false, 
    fade: true, 
    asNavFor: '.slider-nav' 
}); 
$('.slider-nav').slick({ 
    slidesToShow: 3, 
    slideToScroll: 1, 
    asNavFor: '.slider-for', 
    dots: true, 
    centerMode: true, 
    focusOnSelect: true 
});

對於我的HTML我有以下幾點：

<div class="slider-for"> 
    <div> 
     test 1 
    </div> 
    <div> 
     test 2 
    </div> 
    <div> 
     test 3 
    </div> 
</div> 
<div class="slider-nav"> 
    <div> 
    <img src="images/carousel-thumbnails/thumbnail-1.jpg" alt=""/> 
    </div> 
    <div> 
    <img src="images/carousel-thumbnails/thumbnail-2.jpg" alt=""/> 
    </div> 
    <div> 
    <img src="images/carousel-thumbnails/thumbnail-3.jpg" alt=""/> 
    </div> 
</div>

爲了澄清，當我檢查滑塊油滑網站上同步例子，我看到的按鈕生成的標記，但不是爲我自己光滑的旋轉木馬：

<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button> 

<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>

來源

2016-11-09 bamboopanda

這是因爲，以示出的箭頭的條件，這是

if(_.slideCount > _.options.slidesToShow)

其中，

slideCount - 總不會滑動或<div>元件在這種情況下

slidesToShow - 屬性通過在光滑的設置/選項

因此，在你的情況下slideCount是3（div slider-nav內的幻燈片/子div總數）和slidesToShow爲3，不符合上述條件。

因此顯示的箭頭或者添加一些更divs或減少slidesToShow

$('.slider-nav').slick({ 
    slidesToShow: 2, /* reduce this number */ 
    slideToScroll: 1, 
    asNavFor: '.slider-for', 
    dots: true, 
    centerMode: true, 
    focusOnSelect: true 
});

值這裏的，這是它JSfiddle

來源

2016-11-09 16:46:39

沒錯！你先生，我的一天，謝謝你。 – bamboopanda

我會評論說，如果我能已經COMME NT。在我看來，你誤解了給出的例子。您正在嘗試使用「Slider Syncing」的示例，您可以注意到，'slider-nav'上有箭頭，但'slider-for'上沒有箭頭。

至於解決建議你添加

arrows: false,

到$('.slider-nav').slick函數調用

來源

2016-11-09 16:11:05 vickzzzzz

$('.slider-for').slick({ 
    .. 
    arrows: false, // use true or remove it 
    .. 
});

不要使用箭頭假的，它消除滑塊箭頭。

來源

2016-11-09 16:11:22 Manish

滑動導航的光滑傳送帶箭頭

回答

相關問題