Как сделать календарь с помощью jQuery (слайд дней как карусель)?Нет сетки дней.Только дни карусели - PullRequest
Новая
       7

Как сделать календарь с помощью jQuery (слайд дней как карусель)?Нет сетки дней.Только дни карусели

0 голосов
/ 29 сентября 2018

Я разрабатываю календарь, в котором дни отображаются с помощью BX Slider.Семь дней показаны вовремя.После щелчка левой стрелки отображаются предыдущие 7 дней.Нажмите стрелку вправо, чтобы увидеть следующие 7 дней.

Ссылка: https://www.munchkinfun.com/miami/cal

Довольно просто, но ...

Я пытался Slick ,FlexSlider и BX Slider .Slick и BX Slider приблизились к ожидаемому результату.Но у обоих есть некоторые ошибки.Я опубликовал проблемы в обоих GitHubs, но я не знаю, возможно ли делать то, что я хочу, с другими настройками или другими плагинами.

Slick Slider

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

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

Ошибка 1: Щелкните стрелку влево на первой позиции и обратите внимание, что левый край не достигнут.Стрелка влево заканчивается в день 04.

Ошибка 2: Измените класс active на день 28 и запустите скрипку.Нажмите стрелку влево и обратите внимание, что точки изменились, но пятно не скользит.

BX Slider

Там похожая ошибка.если 'moveSlides' == 1, то все работает.если «moveSlides»> 1, «навигация точек» не меняется, что указывает на неправильность некоторых вызовов.В той же скрипке у меня есть опция startSlide, которая тоже не работает.Если раскомментировать строку и изменить moveSlides на 1, начальный слайд будет DOMINGO 07 out.Обратите внимание, что последний день не может быть достигнут.

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

То, что я хочу сделать, довольно просто, но я пытался много дней, и яне могу решить.

Я ценю любую помощь.Спасибо!

1 Ответ

0 голосов
/ 02 октября 2018

Я отказался от плагинов Slick и BX Slider.Я попробовал jCarousel и работает нормально.Это немного больше работы, чем другие, потому что не имеет CSS по умолчанию, НО не имеет ошибок (в моем использовании).

Вот скрипка с окончательным результатом: 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'
});
...