如何获取 Glide.js 中的当前幻灯片编号

Question

您好，当我在 GLide.js http://glide.jedrzejchalubek.com/docs.html#intro.

中单击下一个和上一个按钮时，如何获取当前幻灯片编号

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

Answer 1

由于某种原因，函数 carousel.current() 无法正常工作。

您可以改用代码的回调和事件。示例：

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

此外，carousel.index() 也可以！

Answer 2

不知道为什么，但是缺少有关访问 API 的文档。我会解决的。

在拨打 api 电话之前，您需要通过 .data('glide_api') 访问 api。

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

console.log(carousel.current());

感谢使用插件！

Answer 3

对我有用：

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()

});

Answer 4

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

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

Answer 5

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

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

  glide.mount();

Answer 6

您可以在您的 glide 实例上访问属性 index。

例如：

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 );

如何获取 Glide.js 中的当前幻灯片编号

How to get the current slide no in Glide.js

javascript

jquery

glidejs