javascript - How to get the current slide no in Glide.js - Stack Overflow

admin管理员组

文章数量:1297016

Hi how can I get the current slide no when I click next and previous button in GLide.js .html#intro.

var carousel = $('#Carousel').glide({
                type: 'carousel',
                startAt: 1,
                touchDistance: 2,
          afterInit:function(){console.log("paintSlider")},
          autoplay: 0
              });
console.log(carousel.current());

Hi how can I get the current slide no when I click next and previous button in GLide.js http://glide.jedrzejchalubek./docs.html#intro.

var carousel = $('#Carousel').glide({
                type: 'carousel',
                startAt: 1,
                touchDistance: 2,
          afterInit:function(){console.log("paintSlider")},
          autoplay: 0
              });
console.log(carousel.current());

• javascript
• jquery
• glidejs

Share Follow edited Apr 12, 2018 at 13:27 Jędrzej Chałubek 1,44811 gold badge1616 silver badges2929 bronze badges asked Mar 7, 2016 at 6:32 Amila IddamalgodaAmila Iddamalgoda 4,2961212 gold badges5050 silver badges8686 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

 const glide = new Glide('.glide');

  glide.on(['mount.after', 'run'], () => {
    const currentIndex = glide.index;
    console.log(currentIndex)
   });

  glide.mount();

For some reason, the function carousel.current() is not working.

You can use the code's callback and events instead. Example:

var carousel = $('#Carousel').glide({
            type: 'carousel',
            ...
            afterTransition : function(event) {
                console.log(event.index); // the current slide number
            } 
        });

Also, carousel.index() works too!

Not sure why, but documentation about accessing API is missing. I'll fix that.

You need to access api via .data('glide_api'), before making api calls.

var carousel = $('#Carousel').glide({
      type: 'carousel',
      startAt: 1,
      touchDistance: 2,
      afterInit:function(){console.log("paintSlider")},
      autoplay: 0
}).data('glide_api');

console.log(carousel.current());

Thanks for using plugin!

It works for me:

jQuery(document).ready(function(){

    var glide = jQuery('.slider').glide({
        afterTransition : function() {
            console.log(glide.current());
        } 
    }).data('api_glide'); // data('api_glide') to get opportunity to use glide.current()

});

You can access the property index on your glide instance.

For example:

import Glide, { Controls } from '@glidejs/glide/dist/glide.modular.esm';

var glider = new Glide( el, options );

glider.mount( {
  Controls,
} );

// You can get the current index using glider.index;
console.log( glider.index );

Glibert answer works

var stGlide = new Glide(`.heroglide-${article.id}`, {
          type: 'carousel',
          animationDuration: 500,
          startAt: 1,
          perView: 1,
          peek: {
              before: 50,
              after: 50
          },
        //   afterTransition : function(event) {
        //     console.log("========transition",event.index); // the current slide number
        // } 
          }); 
          try{
         
          stGlide.on(['mount.after', 'run'], () => {
            const currentIndex = stGlide.index;
            console.log("====>index==>",currentIndex)
           
           });

         
            stGlide.mount();
          }
 

const glide = new Glide('.glide');

glide.on("run", () => {
   console.log(slider.index);
});

本文标签： javascriptHow to get the current slide no in GlidejsStack Overflow