如何使用 jQuery 制作日历（滑动日期作为轮播）？无格日。只有轮播日

Question

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

参考：https://www.munchkinfun.com/miami/cal

很简单，但是...

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

光滑的滑块

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

$(".slider").slick({ infinite: false, slidesToShow: 7, slidesToScroll: 5, dots: false, initialSlide: 24, edgeFriction: 0, });

错误 1：单击左箭头到第一个位置，请注意未到达左边缘。左箭头在第 04 天完成。

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

BX 滑块

有一个类似的错误。如果 'moveSlides' == 1 那么一切正常。如果 'moveSlides' > 1，则 "dots navigation" 没有改变，这表明某些计算是错误的。在同一个 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'
});

如何使用 jQuery 制作日历（滑动日期作为轮播）？无格日。只有轮播日

How to do a calendar with jQuery (slide days as carousel)? No grid days. Only carousel days

html

javascript

jquery

bxslider

slick.js

光滑的滑块

BX 滑块