当定期更改滑块中的幻灯片时,从第一张幻灯片更改为最后一张幻灯片时,第一张幻灯片会闪烁。
该错误仅出现在 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)