Any plan for the Autoplay feature?

[coderdiaz]

Hi @NickPiscitelli,
Are you planning to add the autoplay feature?

[NickPiscitelli]

Hi Javier, Someone else recently contacted me about this as well and he was intending on providing the functionality as a pull request. It should be rather easy to add though so if I don't hear back from him soon, it's definitely something I can look into adding.

…

On Thu, Apr 4, 2019 at 5:08 PM Javier Diaz Chamorro < ***@***.***> wrote: Hi @NickPiscitelli <https://github.com/NickPiscitelli>, Are you planning to add the autoplay feature? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#43>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABm9lVEFPqgCPiXSaVrL8L_Pqu5yjiqFks5vdmnDgaJpZM4cdtuy> .

[guidopontet]

Hi @coderdiaz , temporarily you could use this function:

function sliderAuto(slider, miliseconds) {
 slider.isLastSlide = function() {
   return slider.page >= slider.dots.childElementCount - 1;
 }

 var slide = function() {
   slider.slideTimeout = setTimeout(function() {
     function slideTo() {
       return slider.isLastSlide() ? 0 : slider.page + 1;
     }

     slider.scrollItem(slideTo(), true);
   }, miliseconds);
 }

 slider.ele.addEventListener('glider-animated', function(event) {
   window.clearInterval(slider.slideTimeout);
   slide();
 });

 slide();
}

@NickPiscitelli if you need, i could PR it.

[coderdiaz]

@guidopontet Nice, thanks man!

[saosangmo]

@guidopontet
How can I use this function?
Many thanks for your great plugin.

[guidopontet]

Hi @saosangmo. You just have to send de instance of the Slider as 1st parameter. Btw, this plugin was developed by @NickPiscitelli.

[NickPiscitelli]

@guidopontet I'd be happy to accept a pull request, would you be able to add in support so that it respects this setting per breakpoint size?

[panoply]

Something less elegant but suffices for my use case.

    let slide = 0
    const slides = slider.slides.length - slider.opt.slidesToShow

    setInterval(() => {
      if (slider.slide === slides) {
        slide = 0
        slider.scrollItem(slide)
      } else {
        slide = slide + 1
        slider.scrollItem(slide)
      }
    }, 1000)

[johncodesit]

Hi all! I'm planning on using "Perspective View" on a project but I was wondering if there is an autoplay version of it, in which I can set a 'duration:1500' in miliseconds. @guidopontet would that function be useful for this goal? Thanks in advance!

[guidopontet]

Hi all! I'm planning on using "Perspective View" on a project but I was wondering if there is an autoplay version of it, in which I can set a 'duration:1500' in miliseconds. @guidopontet would that function be useful for this goal? Thanks in advance!

@johncodesit Hi! Yes, u just have to pass 1500 as second parameter.

[bhhaskin]

@NickPiscitelli I would actually suggest that you don't implement this. Right now this is a very light and minimal library and it is pretty trivial to do this on the user end. Not many "developer" sliders out there.

It could be helpful to include a example of how to do a simple autoplay in the docs.

let slider = new Glider(element, {
    slidesToScroll: 1,
    slidesToShow: 1,
    draggable: true,
    scrollLock: true,
    rewind: true,
});

let autoplayDelay = 5000;

let autoplay = setInterval(() => {
    slider.scrollItem('next')
}, autoplayDelay);

element.addEventListener('mouseover', (event) => {
    if (autoplay != null) {
      clearInterval(autoplay);
      autoplay = null;
    }
}, 300);

element.addEventListener('mouseout', (event) => {
    if (autoplay == null) {
      autoplay = setInterval(() => {
          slider.scrollItem('next')
      }, autoplayDelay);
    }
}, 300);

[NickPiscitelli]

@bhhaskin Thank you for providing the snippet. I agree, this is better left to the developer to implement. The primary purpose of Glider.js is to be lightweight, developer friendly and allow native scrolling through elements. There are plenty of more robust carousel plugins to offer this functionality, this plugin is best used for uniform lists, such as product upsells.

Potentially in a second release, there will be an optional extension to the library to support more robust functionality, but I would like to ensure the core plugin remains true to it's original values.

[javaidnaik]

Here is my implementation with breakpoints

window.addEventListener('load', function(){
     new Glider(document.querySelector('.glider'), {
            slidesToShow: 1,
            slidesToScroll: 1,
            scrollLock: true,
            dots: '.dots',
            arrows: {
              prev: '.glider-prev',
              next: '.glider-next'
            },
           responsive: [
            {
              // screens greater than >= 775px
              breakpoint: 775,
              settings: {
                // Set to `auto` and provide item width to adjust to viewport
                slidesToShow: '3',
                slidesToScroll: '1',
                itemWidth: 150,
                duration: 0.50
              }
            },
            {
              // screens greater than >= 775px
              breakpoint: 575,
              settings: {
                // Set to `auto` and provide item width to adjust to viewport
                slidesToShow: '2',
                slidesToScroll: '1',
                itemWidth: 150,
                duration: 0.50
              }
            }
            ,{
              // screens greater than >= 1024px
              breakpoint: 1024,
              settings: {
                slidesToShow: 4,
                slidesToScroll: 1,
                itemWidth: 150,
                duration: 0.50
              }
            }
          ]

        });
      const glider = new Glider(document.getElementById('glider'));

      function sliderAuto(slider, miliseconds) {
       const slidesCount = slider.track.childElementCount;
       let slideTimeout = null;
       let nextIndex = 1;

       function slide () {
         slideTimeout = setTimeout(
           function () {
             if (nextIndex >= slidesCount ) {
               nextIndex = 0;
             }
             slider.scrollItem(nextIndex++);
           },
           miliseconds
         );
       }

       slider.ele.addEventListener('glider-animated', function() {
         window.clearInterval(slideTimeout);
         slide();
       });

       slide();
      }

      sliderAuto(glider, 2000)
   })

[paulkre]

I had some problems with the solutions above when using glider in combination with drag. So here is my implementation:

const glider = new Glider(el, {
  draggable: true,
  scrollLock: true,
  scrollLockDelay: 0,
  duration: 3,
});

let autoplayDelay = 5000;

let timeout = -1;
let hovering = false;
function startTimeout() {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    if (!hovering)
      glider.scrollItem((glider.slide + 1) % glider.slides.length);
  }, autoplayDelay);
}

let animID = 0;
const isAnimating = () => glider.animate_id !== animID;
el.addEventListener("glider-animated", () => {
  animID = glider.animate_id;
  if (!hovering) startTimeout();
});

el.addEventListener("mouseover", () => {
  hovering = true;
  clearTimeout(timeout);
});

el.addEventListener("mouseout", () => {
  hovering = false;
  if (!isAnimating()) startTimeout();
});

startTimeout();

[thanhnguyen2075]

I had some problems with the solutions above when using glider in combination with drag. So here is my implementation:

const glider = new Glider(el, {
  draggable: true,
  scrollLock: true,
  scrollLockDelay: 0,
  duration: 3,
});

let autoplayDelay = 5000;

let timeout = -1;
let hovering = false;
function startTimeout() {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    if (!hovering)
      glider.scrollItem((glider.slide + 1) % glider.slides.length);
  }, autoplayDelay);
}

let animID = 0;
const isAnimating = () => glider.animate_id !== animID;
el.addEventListener("glider-animated", () => {
  animID = glider.animate_id;
  if (!hovering) startTimeout();
});

el.addEventListener("mouseover", () => {
  hovering = true;
  clearTimeout(timeout);
});

el.addEventListener("mouseout", () => {
  hovering = false;
  if (!isAnimating()) startTimeout();
});

startTimeout();

thanks for your code, but when i put to my website, in console show Uncaught ReferenceError: el is not defined
, so code not working