我正在开发一个日历,该日期通过BX Slider显示。 一次显示7天。 单击左箭头后,将显示前7天。点击向右箭头,显示接下来的7天。
参考:https://www.munchkinfun.com/miami/cal
很简单,但是...
我尝试了Slick,FlexSlider和BX Slider。 Slick和BX Slider更接近预期结果。但是两者都有一些错误。我在两个GitHub上都发布了这些问题,但是我不知道是否可以使用其他设置或其他插件来完成我想做的事情。
提琴:http://jsfiddle.net/w3x0cznq/1/
$(".slider").slick({
infinite: false,
slidesToShow: 7,
slidesToScroll: 5,
dots: false,
initialSlide: 24,
edgeFriction: 0,
});
错误1:单击左箭头到第一个位置,请注意未到达左边缘。左箭头在第四天结束。
错误2:将active
类更改为第28天,然后进行提琴演奏。单击左箭头,请注意点已更改,但光滑不会滑动。
有一个类似的错误。如果'moveSlides'== 1,则所有工作正常。
如果'moveSlides'> 1,则“点导航”不变,这表明某些计算错误。同样,我有一个选项startSlide
也不起作用。如果取消注释该行并将moveSlides
更改为1,则开始幻灯片将是DOMINGO 07。请注意,最后一天没到。
提琴:https://jsfiddle.net/w3a97zyh/
我想做的事情很简单,但是我已经尝试了很多天了,我无法解决。
感谢您的帮助。谢谢!
答案 0 :(得分:1)
我放弃了Slick和BX Slider插件。我尝试了jCarousel,并且工作正常。比起其他方法,它需要做更多的工作,因为没有默认的CSS,但是没有bug(在我的使用中)。
以下是最终结果的小提琴:https://jsfiddle.net/m9nurv2f/10/
我的默认设置(请参见小提琴):
$('.jcarousel')
.on('jcarousel:createend', function() {
$(this).jcarousel('scroll', $('.jcarousel li:eq('+get_initialSlide($('.jcarousel').find("ul"))+')'), false);
}).jcarousel();
$('.jcarousel-prev').on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
}).on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
}).jcarouselControl({
target: '-=7'
});