How I can make an autoplay of sliders

[tianxxxchris]

How I can make an autoplay of sliders?

hello thank you very much for your work
my problem is that I can not do
the sliders alone activate
in other words
I want to make an autoplay sliders
as I can do?

thank you very much

[alvarotrigo]

This is not about fullpage.js, this is about jQuery / Javascript knowledge.

Using the method moveSlideRigh() inside a Javascript function setTimeout, for example.
And all of this inside an afteRender or an afterLoad callback:

$(document).ready(function () {
    $('#fullpage').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3'],
        loopBottom: true,
        afterRender: function () {
            setInterval(function () {
                $.fn.fullpage.moveSlideRight();
            }, 1000);
        }
    });
});

Live demo

[tianxxxchris]

that was quick reply
I run 100%
thank you very much
you are a crack!
or as they say in Colombia "That Chimba"

[ghost]

can we pause the slides on hover?

[alvarotrigo]

@CodeStorming try it.

[ghost]

I actually took a different approach to my website now.But anyways thanks for the reply.
Your javascript is really good btw.
-cheers

[huaucke]

How i can make an autoplay of sliders by id?
Its posible?

[HowellCG]

This is not working for me, could there be an update that has rendered this fix out-of-date?

[alvarotrigo]

@HowellCG it is working on the link. You are definitely doing something wrong.

[ssuryar]

This Code however provides auto play. but after placing in HTML (fullPage.js-master/examples/navigationH.html) it adds multiple fpControlArrow code

---

$(document).ready(function () {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3'],
loopBottom: true,
afterRender: function () {
setInterval(function () {
$.fn.fullpage.moveSlideRight();
}, 500);
}
});
});

---

[ajmaurya99]

Is there anyway to loop through the sliders.
after reaching at the last slide, it again comes back to the first slide in reverse direction, can me make it a cycle loop.

[alvarotrigo]

@ajmaurya99 check out this topic: #124

[rizkysyazuli]

hi, i have two horizontal slides in my page. and i want to disable the autoplay on one of the slide using clearInterval() like this. but it didn't work. what did i miss? thx!

EDIT: got it working

afterLoad: function(anchorLink, index) {
    if (index == 1) {
        autoslide = setInterval(function() {
            $.fn.fullpage.moveSlideRight();
        }, 5000);
    } else {
        if (autoslide) {
            clearInterval(autoslide);
            autoslide = 0;
        }
    }
}

not pretty. plus I'm using a global autoslide variable to refer the animation. so feel free for anyone to throw some suggestions here.

[ninadakolekar]

I want to create some sections that scroll horizontally? I don't want sliders/carousels. I need sections that scroll horizontally. Is that possible with fullPage.js?

[alvarotrigo]

@ninadakolekar did you check the Scroll Horizontally extension?

[Matokosp]

Hello, the fiddle is not working, and when I copy the code it gives me an error:

"Uncaught TypeError: $(...).fullpage is not a function
at index.html:101"

I've tried to fix it but it doesn't work, Could you help me please?

@HowellCG it is working on the link. You are definitely doing something wrong.

[alvarotrigo]

The code is using the jQuery initialization.
Just transform it to pure javascript according to the the fullpage.js documentation if you are not using jQuery.

[jloguercio]

Hi, its possible to autoslide only one slide section and leave the others only to use the keyarrows?

[alvarotrigo]

@jloguercio many things are possible with the right knowledge. Use the search on this forum or on Google to find your answer. It has been answered many times.

[zeroseisdesign]

Hi, how I can configure slides autoplay in Angular? Thanks in advance.

[alvarotrigo]

Hi, how I can configure slides autoplay in Angular? Thanks in advance.

Same way than here:
https://alvarotrigo.com/fullPage/help/how-to-autoplay-vertical-section-in-fullpage-js/
https://alvarotrigo.com/fullPage/help/how-to-autoplay-horizontal-slides-in-fullpage-js/

[zeroseisdesign]

I was trying with this: https://alvarotrigo.com/fullPage/help/how-to-autoplay-horizontal-slides-in-fullpage-js/
but Angular doesn't find the name 'fullpage_api' in this code and can't compile:

`afterLoad: function (origin: any, destination: any, direction: any) {
clearInterval(g_interval);

    const lapse = 1000;
    
    const shouldAutoPlay = destination.item.hasAttribute('data-auto');

    const hasSlides = destination.item.querySelectorAll('.fp-slides').length;
    
    if(shouldAutoPlay && hasSlides){
      g_interval = setInterval(function () {
        fullpage_api.moveSlideRight();
      }, lapse);
    }
  },

};`

Any idea?

Thanks

[zeroseisdesign]

Hi, how I can configure slides autoplay in Angular? Thanks in advance.

Same way than here: https://alvarotrigo.com/fullPage/help/how-to-autoplay-vertical-section-in-fullpage-js/ https://alvarotrigo.com/fullPage/help/how-to-autoplay-horizontal-slides-in-fullpage-js/

zeroseisdesign commented 23 minutes ago •
edited
I was trying with this: https://alvarotrigo.com/fullPage/help/how-to-autoplay-horizontal-slides-in-fullpage-js/
but Angular doesn't find the name 'fullpage_api' in this code and can't compile:

`afterLoad: function (origin: any, destination: any, direction: any) {
clearInterval(g_interval);

const lapse = 1000;

const shouldAutoPlay = destination.item.hasAttribute('data-auto');

const hasSlides = destination.item.querySelectorAll('.fp-slides').length;

if(shouldAutoPlay && hasSlides){
  g_interval = setInterval(function () {
    fullpage_api.moveSlideRight();
  }, lapse);
}

},

};`
Any idea?

[alvarotrigo]

@zeroseisdesign for angular issues please use the angular wrapper forum.