如何在滑翔.js中获取当前幻灯片
How to get the current slide no in Glide.js
嗨,当我
在 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());
const glide = new Glide('.glide');
glide.on(['mount.after', 'run'], () => {
const currentIndex = glide.index;
console.log(currentIndex)
});
glide.mount();
由于某种原因,函数carousel.current()
不起作用。
可以改用代码的回调和事件。例:
var carousel = $('#Carousel').glide({
type: 'carousel',
...
afterTransition : function(event) {
console.log(event.index); // the current slide number
}
});
另外,carousel.index()
也有效!
不知道为什么,但缺少有关访问 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());
感谢您使用插件!
它对我有用:
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()
});
您可以在滑翔实例上访问属性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 );
格利伯特答案有效
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);
});
相关文章:
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 幻灯片滚动javascript不起作用
- jquery试图按名称获取按钮位置
- 如何在jQuery中获取元素的形式
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 如何在Slick Carousel中获取活动中的幻灯片元素
- 获取完整页面上加载的幻灯片.js slideload回调
- 需要获取当前幻灯片编号 - 基本 JQuery 滑块
- 如何在滑翔.js中获取当前幻灯片
- 在 JQuery 循环中,如何获取当前幻灯片的 src
- 光滑的旋转木马如何将当前幻灯片作为 dom 或 jquery 对象获取
- 如何获取 HTML5 范围(2 张幻灯片)滑块在 PHP 中的值
- 如何获取最后一张和第一张幻灯片以相应地激活或禁用下一个和上一个按钮
- 如何在bxslider中获取一组活动幻灯片
- 获取活动幻灯片并更新每张新幻灯片上的数字
- 在fullpage.js上获取当前幻灯片
- Javascript幻灯片问题.正在获取空白屏幕
- 使用书排.js时获取当前幻灯片编号
- 如何在弹性滑块中获取幻灯片总数
- jQuery自制幻灯片代码似乎无法获取图像的当前上下文