标签: glidejs

我正在尝试使用 glide.js 构建旋转木马/rondell。我希望左右箭头显示在滑行轨道之外。旋转木马/旋转木马应该完全响应。这是一张应该如何的图片。

有人可以帮我吗？

谢谢你！

我正在尝试使用 glidejs 作为网站上的滑块，但是我无法让项目符号正常工作。项目符号位于本页 glidejs 网站上示例的底部： https: //glidejs.com/docs/options/在我的网站上，项目符号显示，但单击它们不会更改幻灯片。我还没有找到任何需要在 glidejs 初始化中传递才能使这些工作的选项的文档。据我从 glidejs 网站得知，初始化 glide 应该可以自动完成这项工作。我所做的其他一切都按预期工作，例如在计时器上更改幻灯片以及为下一张和上一张幻灯片提供箭头导航。我的初始化代码位于名为 glideInit.js 的文件中，如下所示：

document.addEventListener("DOMContentLoaded", function() {
    var glide = new Glide('#slider', {
        type : 'carousel',
        perView : 1,
        focusAt : 'center',
        breakpoints : {
            800 : {
                perView : 1
            },
            480 : {
                perView : 1
            }
        },
        autoplay: 5000
    });

    glide.mount();

});

function startTimer() {
    setInterval(function() {
        forward('slideForward');
    }, 5000);
}

这是我的滑块的 html：

<div id="slider" class="glide">
        <div class="glide__track" data-glide-el="track">
            <div class="glide__slides">
                {% for entry in …

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

该错误仅出现在 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();

.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; …