javascript - 如何使用 jQuery 制作日历(滑动日期作为轮播)？无格日。只有轮播日

Question

我正在开发一个日历，用 BX Slider 显示日期。时间显示 7 天。单击左箭头后，会显示前 7 天。单击向右箭头，显示接下来的 7 天。

引用:https://www.munchkinfun.com/miami/cal

很简单，但是...

我试过了 Slick 、FlexSlider 和 BX Slider . Slick 和 BX Slider 更接近预期结果。但是两者都有一些错误。我在两个 GitHub 上都发布了这些问题，但我不知道是否可以使用其他设置或其他插件来做我想做的事情。

光滑的 slider

fiddle :http://jsfiddle.net/w3x0cznq/1/


$(".slider").slick({
无限:假，
幻灯片显示:7，
幻灯片滚动:5，
点:假的，
初始幻灯片:24，
边缘摩擦:0，
});


错误 1:单击向左箭头到第一个位置，请注意未到达左边缘。左箭头在第 4 天结束。

错误 2:将 active 类更改为第 28 天并运行 fiddle。单击向左箭头并注意点已更改，但光滑不会滑动。

BX slider

有一个类似的错误。如果 'moveSlides' == 1 那么一切正常。如果 'moveSlides' > 1，“点导航”不会改变，这表明某些计算是错误的。在同一个 fiddle 中，我有一个选项 startSlide 也不起作用。如果取消注释该行并将 moveSlides 更改为 1，则开始幻灯片将是 DOMINGO 07。请注意，不会到达最后一天。

fiddle :https://jsfiddle.net/w3a97zyh/

我想做的很简单，但是我试了很多天都解决不了。

我很感激任何帮助。谢谢!

Answer 1

我放弃了 Slick 和 BX Slider 插件。我试过 jCarousel并且工作正常。它比其他的多一点工作，因为没有默认 CSS，但没有错误(在我的使用中)。

这是最终结果的 fiddle :https://jsfiddle.net/m9nurv2f/10/

我的默认设置(请看 fiddle ):

$('.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'
});