Как заставить пули работать правильно в glidejs - PullRequest
Новая
       36

Как заставить пули работать правильно в glidejs

1 голос
/ 23 марта 2019

Я пытаюсь использовать 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 entries %}
                {% set url = entry.slideBackgroundImage.first().getUrl() %}

                <div class="hero -homepage glide__slide">
                    <div class="container">
                        <h1 class="hero__title -homepage"><a href="{{ entry.url }}" class="title-link">{{ entry.title }}</a></h1>

                        <div class="hero__row">
                            <div class="override-redactor">
                                <a href="{{ entry.url }}">{{ entry.slideExcerpt }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="glide__arrows" data-glide-el="controls">
            <button id="slideBack" class="glide__arrow glide__arrow--left" data-glide-dir="<">&lt;</button>
            <button id="slideForward" class="glide__arrow glide__arrow--right" data-glide-dir=">">&gt;</button>
        </div>
        <div class="glide__bullets" data-guide-el="controls[nav]">
            <button class="glide__bullet" data-glide-dir="=0"></button>
            <button class="glide__bullet" data-glide-dir="=1"></button>
        </div>
    </div>

1 Ответ

0 голосов
/ 30 марта 2019

После перерыва в решении этой проблемы и возвращения к ней я наткнулся на конкретный метод, который делает это в glide.js. Как только объект скольжения создан, вы можете позвонить 

glide.go('=<slide_number>');

, где <slide_number> заменяется целым числом, например glide.go('=2')

...