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

Question

I'm developing a calendar, which the days are shown with BX Slider. Seven days are shown at time. After click left arrow, previous 7 days are shown. Click right arrow, nexts 7 days are shown.

Reference: https://www.munchkinfun.com/miami/cal

Quite simple, but...

I tried Slick, FlexSlider and BX Slider. Slick and BX Slider came closer to the expected result. But both have some bugs. I posted the issues in both GitHubs, but I don't know if is possible to do what I want with other settings or other plugins.

Slick Slider

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

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

Bug 1: Click left arrow to the first position and note that left edge is not reached. Left arrow finishes in day 04.

Bug 2: Change the active class to day 28 and run fiddle. Click left arrow and note that dots changed, but slick doesn't sliding.

BX Slider

There a similar bug. if 'moveSlides' == 1 then all works. if 'moveSlides' > 1, the "dots navigation" doesn't changes, which indicates that some calcs are wrong. In the same fiddle, I have an option startSlide which doesn't works too. If uncomment the line and change moveSlides to 1, start slide will be DOMINGO 07 out. Note that the last day don't be reached.

Fiddle: https://jsfiddle.net/w3a97zyh/

What I want to do is quite simple, but I've been trying for a lot of days and I can not to solve.

I appreciate any help. Thanks!

Answer 1

I gave up the plugins Slick and BX Slider. I tried jCarousel and works fine. It's a little bit more work than others, because has no default CSS, BUT has no bugs (in my use).

Here's the fiddle with the final result: https://jsfiddle.net/m9nurv2f/10/

My default settings (please, see the 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'
});