How can I add autoplay to this this Slice Slider?

Question

I have a slider here and I cannot figure out how to implement the autoplay functionality. Can I set this up quickly in the var settings?

I tried to fill in the setInterval(spin, 3000); command before and after the init lines but so far it didn't work out.

(function($) {

 $.fn.sliceSlider = function(options) {       
    var settings = {  
        speed : '500',
        easing : 'cubic-bezier(0.8, 0, 0.2, 1)',

    };

    if(options) {
        $.extend(settings, options);
    }

    return this.each(function() {   

        var $this = $(this),
            $rightColumn = $this.find('.slice-slider-right-column'),
            $rightWrapper = $this.find('.slice-slider-right-column .slice-slider-wrapper'),
            $rightSlide = $this.find('.slice-slider-right-column .slice-slider-slide'),
            $length = $rightSlide.length,
            $settings = settings,
            mousewheelFinish = 0,

            $leftColumnContent = "";

        $rightSlide.each(function(){
            $leftColumnContent = '<div class="slice-slider-slide">'+$(this).html()+'</div>' + $leftColumnContent;
        });
        $('<div class="slice-slider-left-column"><div class="slice-slider-wrapper">'+$leftColumnContent+'</div></div>').insertBefore($rightColumn);
        if($length>1) $this.append('<div class="pagination"><div class="point active"></div>'+'<div class="point"></div>'.times($length-1)+'</div>');

        var $leftWrapper = $this.find('.slice-slider-left-column .slice-slider-wrapper'),
            $leftSlide = $this.find('.slice-slider-left-column .slice-slider-slide');

        $leftSlide.filter(':last').addClass('active').prevAll().addClass('prev');
        $rightSlide.filter(':first').addClass('active').nextAll().addClass('next');

        $this.find('.slice-slider-wrapper, .slice-align-animation').css({'transition':'all '+$settings.speed+'ms '+$settings.easing, '-webkit-transition':'all '+$settings.speed+'ms '+$settings.easing});

        function init(){
            setActiveSlice($leftWrapper, $leftSlide.filter('.active').index());
            setActiveSlice($rightWrapper, $rightSlide.filter('.active').index());

        }

        function setActiveSlice(foo, index){
            foo.css({'top':$this.height()*(-1)*index});
        }

        init();
        $('.rotate').css({'width':$('.rotate:visible').parent().height()});

        $this.on('mousewheel', function(event) {
            if(!mousewheelFinish && !$('body').hasClass('min-height')){
                mousewheelFinish = 1;
                setTimeout(function(){mousewheelFinish = 0;}, $settings.speed);
                if(event.deltaY>0) {
                    $leftSlide.filter('.active:not(:last-child)').removeClass('active prev next').addClass('prev').next().removeClass('prev next').addClass('active');
                    $rightSlide.filter('.active:not(:first-child)').removeClass('active prev next').addClass('next').prev().removeClass('prev next').addClass('active');
                    $this.find('.pagination .point.active:not(:first-child)').removeClass('active').prev().addClass('active');
                }
                else {
                    $leftSlide.filter('.active:not(:first-child)').removeClass('active prev next').addClass('next').prev().removeClass('prev next').addClass('active');
                    $rightSlide.filter('.active:not(:last-child)').removeClass('active prev next').addClass('prev').next().removeClass('prev next').addClass('active');
                    $this.find('.pagination .point.active:not(:last-child)').removeClass('active').next().addClass('active');
                }
                init();
            }
        });

        $this.find('.pagination .point').on('click', function(){
            $(this).parent().find('.active').removeClass('active');
            $(this).addClass('active');
            var index = $this.find('.pagination .point').filter('.active').index(),
                activeSlideLeft = $leftSlide.eq($length-1-index),
                activeSlideRight = $rightSlide.eq(index);

            $leftSlide.removeClass('active prev next');
            $rightSlide.removeClass('active prev next');

            activeSlideLeft.addClass('active').prevAll().addClass('prev');
            activeSlideLeft.nextAll().addClass('next');

            activeSlideRight.addClass('active').prevAll().addClass('prev');
            activeSlideRight.nextAll().addClass('next');

            init();
        });

I would like to have the slider start when the page is fully loaded...

Answer 1

Welcome, if I understood you well, you can easily create a function for that with the code that you already have. Add this code at the end of your snippet:

const changeSlide = () => {
  $leftSlide.filter('.active:not(:first-child)').removeClass('active prev next').addClass('next').prev().removeClass('prev next').addClass('active');
  $rightSlide.filter('.active:not(:last-child)').removeClass('active prev next').addClass('prev').next().removeClass('prev next').addClass('active');
  $this.find('.pagination .point.active:not(:last-child)').removeClass('active').next().addClass('active');

  init();
}

let myAutoplay = setInterval(changeSlide, 3000);

Notice that it will stop in the last slider, if you want you can jump and start again from the beginning.

To avoid any issue with your mousewheel you just need to clear and set again the interval every time the user interacts with it. Something like this:

$this.on('mousewheel', function(event) {
  clearInterval(myAutoplay);
  myAutoplay = setInterval(changeSlide, 3000);
  // The rest of the code
});

Hope this help or at least point you to the right direction :)