小编Dep*_*ian的帖子

GlideJS中第一张幻灯片闪烁

当定期更改滑块中的幻灯片时,从第一张幻灯片更改为最后一张幻灯片时,第一张幻灯片会闪烁。

该错误仅出现在 Chrome 中。我注意到,如果您最小化浏览器窗口然后最大化,则错误会更频繁地出现(但这并不确定:))。

https://github.com/glidejs/glide/issues/300的解决方案没有帮助!

我整理了一个小演示:https://codepen.io/depressingutopian/pen/jOwvpGQ ?editors=1111

演示

const initCarousel = () => {
    const slides = document.querySelectorAll('.glide__slide');
    if (slides.length) {
        const sliderConfiguration = {
            gap: 0,
            type: 'carousel',
            autoplay: '1000',
            animationDuration: '500',
            hoverpause: false,
            keyboard: true,
            animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
            swipeThreshold: 0,
            dragThreshold: false
        };
        const slider = new Glide('.map-banner', sliderConfiguration);
        slider.mount();
    }
}

initCarousel();
Run Code Online (Sandbox Code Playgroud)
.section-default {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  padding: 0;
  margin: 0;
  font-family: 'FiraSans';
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  min-width: 320px; …
Run Code Online (Sandbox Code Playgroud)

html javascript css css-animations glidejs

1
推荐指数
1
解决办法
1129
查看次数

标签 统计

css ×1

css-animations ×1

glidejs ×1

html ×1

javascript ×1