0

На сайте https://сундучок-вл.рф есть слайдер с несколькими фотографиями, но они не сменяются. Вот код слайдера:

<div class="is-block-slider-slides">
  <div class="is-block-slider-slide row">
    <div class="column full">
      <div class="center margin-30">
        <img src="/uploads/4970266635.jpg" width="100%" data-lightbox-src="/uploads/659344913.jpg" data-lightbox-size="807x605">
        <div>
          <b>
            <span style="font-size: 24px !important; color: rgb(68, 68, 68);">
              Временный текст №1
            </span>
          </b>
        </div>
      </div>
    </div>
  </div>
  <div class="is-block-slider-slide row">
    <div class="column full">
      <div class="center margin-30">
        <img src="/uploads/6205361173.jpg" width="100%" data-lightbox-src="/uploads/5904262394.jpg" data-lightbox-size="807x605">
        <div><b><span style="font-size: 24px !important; color: rgb(68, 68, 68);">Временный текст №2</span></b></div>
      </div>
    </div>
  </div>
  <div class="is-block-slider-slide row">
    <div class="column full">
      <div class="center margin-30">
        <img src="/uploads/3049387264.jpg" width="100%" data-lightbox-src="/uploads/9895497464.jpg" data-lightbox-size="808x606">
        <div><b><span style="font-size: 24px !important; color: rgb(68, 68, 68);">Временный текст №3</span></b></div>
      </div>
    </div>
  </div>
  <div class="is-block-slider-slide row">
    <div class="column full">
      <div class="center margin-30">
        <img src="/uploads/9146978267.jpg" width="100%" data-lightbox-src="/uploads/1605175454.jpg" data-lightbox-size="808x606">
        <div><b><span style="font-size: 24px !important; color: rgb(68, 68, 68);">Временный текст №4</span></b></div>
      </div>
    </div>
  </div>
</div>

Какой код нужен для того, чтобы они начали сменяться по кругу?

1 ответ 1

0

Вот такой есть вариант, можете из консоли попробовать на сундучке.

setInterval(() => {
    const slider = document.querySelector('.is-block-slider').slider;
    slider.position++;
}, 2000);

4
  • Спасибо! Код работает. А как сделать смену слайдов более плавной? 8 мая 2020 в 9:52
  • В стилях is-block-slider-slides, свойство transition: 0.3s transform; отвечает за скорость переключения слайдов. Измените стили, изменится скорость. 8 мая 2020 в 10:02
  • А с помощью JS? 8 мая 2020 в 11:05
  • Ну у вас слайдер построен на использовании css переходов. Можно поменять стили с помощью js 8 мая 2020 в 11:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.