Swiper: How to start autoplay just after loading the first image of the first slide?

[tiagogon]

My Swiper is working really great with these setting:

var mySwiper = new Swiper ('.swiper-container', {

                pagination: '.swiper-pagination',
                paginationClickable: true,

                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',

                // AutoPlay
                autoplay: 10000,
                speed: 1500,
                watchSlidesProgress: true,
                watchVisibility: true,

                // Loop
                loop: true,
                loopAdditionalSlides: 2,
                loopedSlides: 2,

                // Position
                slidesPerView: 'auto', //If "auto" or slidesPerView > 1, enable watchSlidesVisibility for lazy load
                spaceBetween: 20,

                // Keyboard and Mousewheel
                keyboardControl: true,
                mousewheelControl: true,
                mousewheelForceToAxis: true, // just use the horizontal axis to 

                // Lazy Loading 
                watchSlidesVisibility: true,
                preloadImages: false,
                lazyLoading: true,

            })

My question is if it's possible to make the autoplay start just after the first image i loaded?

I realizes that if the internet is slower the slide changes with a empty div, which is not so nice..

Anyway, i am amazed with Swiper! thank you foe such a great plugin! <3

[nolimits4web]

Change/add the following options:

//..
autoplay: false,
//...
onLazyImageReady: function (s) {
  if (!s.params.autoplay) {
    s.params.autoplay = 10000;
    s.startAutoplay();
  }
}

[tiagogon]

Amazing! It works! Thanks you so much!

I still would like to make it more perfect... Right now the autoplay just start when one of the 1st or 2nd images/slides are ready. Which is already great. But can i specify to start just when the 1st slide/image ready?

[nolimits4web]

Reading docs could be really useful, look at parameters of this callback, compare loaded slide index with something. For example:

onLazyImageReady: function (s, slide) {
  if (!s.params.autoplay && $(slide.index()) === s.activeIndex) {
    s.params.autoplay = 10000;
    s.startAutoplay();
  }
}

[ghost]

I used this package. But when I set the config like this, it doesn't work autoplay. please review and let me know what's wrong...

config: SwiperOptions = {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    spaceBetween: 30,
    autoplay: 2500,
    watchSlidesProgress: true,
    watchSlidesVisibility: true,
    loop: true
  };

[nolimits4web]

http://idangero.us/swiper/api/#autoplay

[TeroBlaZe]

This is for current api

    new Swiper('.slider', {
            /** your params **/
            on: {
                lazyImageReady: function () {
                    if (!this.autoplay.running) {
                        this.params.autoplay = {
                            delay: 4000,
                            disableOnInteraction: true
                        };
                        this.autoplay.start();
                    }
                }
            }
        });

[skydevelopers]

I want the autoplay when long press on next button, as you can see here:

https://www.dzsooq.com/beta/list?category-id=11545230107

if possible please post possible solution

[TeroBlaZe]

I want the autoplay when long press on next button, as you can see here:

https://www.dzsooq.com/beta/list?category-id=11545230107

if possible please post possible solution

I hope you've already found a solution :) If you didn't yet so there is just a little tricky solution from the website you've provided. As you could see there's no magic :nerd_face:

var timer;
$('.sarrow_next').on("mousedown",function(){
    timer = setTimeout(function(){
        // alert("WORKY");
        console.log('mySwiper1 mouse long pressed:');

            mySwiper1.params.autoplay.delay = 20;
            mySwiper1.autoplay.start();
            mySwiper1.params.autoplay.stopOnLastSlide=true;
            mySwiper1.params.autoplay.reverseDirection=false;
    },2*200);
}).on("mouseup mouseleave",function(){
    clearTimeout(timer);
});
$('.sarrow_prev').on("mousedown",function(){
    timer = setTimeout(function(){
        // alert("WORKY");
        console.log('mouse long pressed:'+mySwiper1.params.autoplay);
            mySwiper1.params.autoplay.delay = 20;
            mySwiper1.autoplay.start();
            mySwiper1.params.autoplay.stopOnLastSlide=true;
            mySwiper1.params.autoplay.reverseDirection=true;
    },2*200);
}).on("mouseup mouseleave",function(){
    clearTimeout(timer);
});