滑动导航的光滑传送带箭头

你好，我正在尝试使用滑块同步选项来滑动，但无法弄清楚如何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

滑动导航的光滑传送带箭头

回答

相关问题