Split Slick Slideshow добавить автоигру - PullRequest
Новая
       5

Split Slick Slideshow добавить автоигру

0 голосов
/ 17 января 2020

Я нашел понравившийся мне слайдер: https://codepen.io/supah/pen/zZaPeE

Единственное, что я хотел бы добавить, - это функция autoplay. Хорошо, что он использует слайд-шоу Slick, которое имеет функцию autoplay, поэтому я подумал, что это будет легко. Я добавил аргумент autoplay, который работал, но некоторые переходы соответствуют неправильным изображениям ... Я уверен, что это из-за причудливых переходов, но я не уверен, что изменить. Кто-нибудь может мне помочь в этом?

Мой код приведен ниже, это оригинальный код с аргументом autoplay: 

var $slider = $('.slideshow .slider'),
maxItems = $('.item', $slider).length,
dragging = false,
tracking,
rightTracking;

sliderRight = $('.slideshow').clone().addClass('slideshow-right').appendTo($('.split-slideshow'));

rightItems = $('.item', $sliderRight).toArray();
reverseItems = rightItems.reverse();
$('.slider', $sliderRight).html('');
for (i = 0; i < maxItems; i++) {
    $(reverseItems[i]).appendTo($('.slider', $sliderRight));
}

$slider.addClass('slideshow-left');

$('.slideshow-left').slick({
    vertical: true,
    verticalSwiping: true,
    arrows: false,
    infinite: true,
    dots: true,
    autoplay: true,
    speed: 1000,
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {

    if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) {
        $('.slideshow-right .slider').slick('slickGoTo', -1);
        $('.slideshow-text').slick('slickGoTo', maxItems);
    } else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) {
        $('.slideshow-right .slider').slick('slickGoTo', maxItems);
        $('.slideshow-text').slick('slickGoTo', -1);
    } else {
        $('.slideshow-right .slider').slick('slickGoTo', maxItems - 1 - nextSlide);
        $('.slideshow-text').slick('slickGoTo', nextSlide);
    }
}).on("mousewheel", function(event) {
    event.preventDefault();
    if (event.deltaX > 0 || event.deltaY < 0) {
        $(this).slick('slickNext');
    } else if (event.deltaX < 0 || event.deltaY > 0) {
        $(this).slick('slickPrev');
    };
}).on('mousedown touchstart', function(){
    dragging = true;
    tracking = $('.slick-track', $slider).css('transform');
    tracking = parseInt(tracking.split(',')[5]);
    rightTracking = $('.slideshow-right .slick-track').css('transform');
    rightTracking = parseInt(rightTracking.split(',')[5]);
}).on('mousemove touchmove', function(){
    if (dragging) {
        newTracking = $('.slideshow-left .slick-track').css('transform');
        newTracking = parseInt(newTracking.split(',')[5]);
        diffTracking = newTracking - tracking;
        $('.slideshow-right .slick-track').css({'transform': 'matrix(1, 0, 0, 1, 0, ' + (rightTracking - diffTracking) + ')'});
    }
}).on('mouseleave touchend mouseup', function(){
    dragging = false;
});

$('.slideshow-right .slider').slick({
    swipe: false,
    vertical: true,
    arrows: false,
    infinite: true,
    autoplay: true,
    speed: 950,
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
    initialSlide: maxItems - 1
});

$('.slideshow-text').slick({
    swipe: false,
    vertical: true,
    arrows: false,
    infinite: true,
    autoplay: true,
    speed: 900,
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
});

Новый Codepen: https://codepen.io/joshrodgers/pen/mdyGoaB

Спасибо, Jo sh

Ответы [ 2 ]

0 голосов
/ 17 января 2020

Я понял это! Мои первоначальные подозрения были верны, мне нужно было добавить аргумент autoplay в слайд-шоу, но только в левое слайд-шоу. Все остальные не нуждались в этом, и все работает правильно! 

var $slider = $('.slideshow .slider'),
maxItems = $('.item', $slider).length,
dragging = false,
tracking,
rightTracking;

$sliderRight = $('.slideshow').clone().addClass('slideshow-right').appendTo($('.split-slideshow'));

rightItems = $('.item', $sliderRight).toArray();
reverseItems = rightItems.reverse();
$('.slider', $sliderRight).html('');
for (i = 0; i < maxItems; i++) {
    $(reverseItems[i]).appendTo($('.slider', $sliderRight));
}

$slider.addClass('slideshow-left');
$('.slideshow-left').slick({
    vertical: true,
    verticalSwiping: true,
    arrows: false,
    infinite: true,
    dots: true,
    speed: 1000,
    autoplay: true,
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {

    if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) {
        $('.slideshow-right .slider').slick('slickGoTo', -1);
        $('.slideshow-text').slick('slickGoTo', maxItems);
    } else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) {
        $('.slideshow-right .slider').slick('slickGoTo', maxItems);
        $('.slideshow-text').slick('slickGoTo', -1);
    } else {
        $('.slideshow-right .slider').slick('slickGoTo', maxItems - 1 - nextSlide);
    $('.slideshow-text').slick('slickGoTo', nextSlide);
    }
}).on("mousewheel", function(event) {
    event.preventDefault();
    if (event.deltaX > 0 || event.deltaY < 0) {
        $(this).slick('slickNext');
    } else if (event.deltaX < 0 || event.deltaY > 0) {
        $(this).slick('slickPrev');
    };
}).on('mousedown touchstart', function(){
    dragging = true;
    tracking = $('.slick-track', $slider).css('transform');
    tracking = parseInt(tracking.split(',')[5]);
    rightTracking = $('.slideshow-right .slick-track').css('transform');
    rightTracking = parseInt(rightTracking.split(',')[5]);
}).on('mousemove touchmove', function(){
    if (dragging) {
        newTracking = $('.slideshow-left .slick-track').css('transform');
        newTracking = parseInt(newTracking.split(',')[5]);
        diffTracking = newTracking - tracking;
        $('.slideshow-right .slick-track').css({'transform': 'matrix(1, 0, 0, 1, 0, ' + (rightTracking - diffTracking) + ')'});
    }
}).on('mouseleave touchend mouseup', function(){
    dragging = false;
});

$('.slideshow-right .slider').slick({
    swipe: false,
    vertical: true,
    arrows: false,
    infinite: true,
    speed: 950,
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
    initialSlide: maxItems - 1
});

$('.slideshow-text').slick({
    swipe: false,
    vertical: true,
    arrows: false,
    infinite: true,
    speed: 900,
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
});

Final Codepen: https://codepen.io/joshrodgers/pen/RwNeaNv

Спасибо, Jo sh

0 голосов
/ 17 января 2020

Думаю, проблема в том, что при добавлении «autoplay» оба ползунка бегут в одном направлении. Вероятно, вы можете автоматически воспроизвести один из них в обратном порядке: 

$('.slideshow-right .slider').slick({
    swipe: false,
    vertical: true,
    arrows: false,
    infinite: true,
    autoplay: true,
    speed: 950,
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
    initialSlide: maxItems - 1,
    rtl: true,
});
...