单击元素重新启动 Glide.js

Question

我有一个带有滑动滑块的灯箱。 Glide.js 已经启动。我想点击我指定的元素来重新启动滑块。关闭灯箱时，我想暂停滑块。我可以看到 API 可以做到这一点，但无法使其正常工作...

我的滑块设置

var slider_alt=$("#glide--alt").glide({
    type:"slideshow",
    autoplay:2500, 
    animationDuration:2000,
    hoverpause:false
}),
slider_api=slider_alt.data("glide_api");

我的 jQuery 尝试重新启动滑块

popUp_openButton.click(function(){
    slider_alt.jump(1);
    slider_alt.play();
});

popUp_closeButton.click(function(){ 
    slider_alt.pause();
});

Answer 1

使用.refresh():

popUp_closeButton.click(function(){ 
   slider_alt.refresh();
});

Answer 2

这是我的最终工作代码。打开模态 window 滑块会重新计算并从幻灯片 1 开始。关闭时停止清除所有对象和绑定。

//Setting up slider
var slider_alt=$("#glide--alt").glide({
    type:"slideshow",
    autoplay:2500, 
    animationDuration:2000,
    hoverpause:false
}),
slider_alt_api=slider_alt.data("glide_api");


var popUp_openButton    = $('.popUp__button--open'),
popUp_closeButton   = $('.popUp__button--close');

popUp_openButton.click(function(){
    slider_alt_api.refresh();
    slider_alt_api.jump('=1');
});

popUp_closeButton.click(function(){ 
    slider_alt_api.destroy();
});     

$(document).keyup(function(e){
    if(e.keyCode === 27) {
        slider_alt_api.destroy();
    }  
});

单击元素重新启动 Glide.js

On clicking element restart Glide.js

javascript

css

jquery

slider

glidejs