Как добавить автовоспроизведение в изображения слайдера с помощью w3slider? - PullRequest
Новая
       27

Как добавить автовоспроизведение в изображения слайдера с помощью w3slider?

0 голосов
/ 02 июля 2019

Я использовал слайдер.Но он скользит вручную, когда я нажимаю на стрелку.

Вот мой HTML-код: 

<div class="w3-content w3-display-container" style="box-shadow: 0px 0px 5px 0px rgba(0,0,0,.3);">

    <img class="mySlides" src="img1.png" />
    <img class="mySlides" src="img2.png" />

    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>         

</div>

Вот мой JS-код: 

var slideIndex = 1;
showDivs(slideIndex);
plusDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = x.length
    }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";
}

Теперь я хочудобавить автозапуск для слайд-изображений.

1 Ответ

2 голосов
/ 04 июля 2019

Я добавил код ниже в ваших javascript и html файлах -

В скрипте создайте autoplay переменную, подобную этой: 

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var autoplay = setInterval("plusDivs(-1)", 3000);
    if (n > x.length) {
        slideIndex = 1
    }
    if (n < 1) {
       slideIndex = x.length
    }
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";
    autoplay;
  }
...