Форум

snovapavel · #1 (**permalink**) 09.11.2016, 06:23

Добрый день!

Есть слайдер, который перебирает, собственно, слайды:

<ul class="container">
  <li class="cell showing">Содержимое 1</li>
  <li class="cell">Содержимое 2</li>
  <li class="cell">Содержимое 3</li>
</ul>

  <br>
  <br>

<ul class="container">
  <li class="cell showing">Содержимое 1</li>
  <li class="cell">Содержимое 2</li>
  <li class="cell">Содержимое 3</li>
</ul>

С одним контейнером работает отлично, но, если добавить ещё один контейнер на страницу с другим содержимым, вместо того, чтобы листать содержимое этих двух контейнеров синхронно, он вначале пролистывает содержимое первого контейнера, а затем второго.

Как заставить их работать синхронно?

Сам код:

var slides = document.querySelectorAll('.container .cell');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
    slides[currentSlide].className = 'cell';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'cell showing';
}

И можно ли избавиться от класса .showing?

Большое спасибо!

рони · #2 (**permalink**) 09.11.2016, 07:15

Сообщение от snovapavel

И можно ли избавиться от класса .showing?

и как "листать" без класса?

Сообщение от snovapavel

Как заставить их работать синхронно?

циклом по .container

snovapavel · #3 (**permalink**) 09.11.2016, 09:43

А как циклом? Он их по очереди листает. Сначала один контейнер ul потом второй, а синхронно оба не хочет

рони · #4 (**permalink**) 09.11.2016, 10:19

snovapavel,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  li{
    display: none;
  }
 li.showing {
    display: block;
 }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function nextSlide() {
[].forEach.call( document.querySelectorAll('.container'), function(el) {
       var li = el.querySelector('.showing');
           li && li.classList.toggle('showing');
           li = li && li.nextElementSibling||el.querySelector('li');
           li.classList.toggle('showing');
});
window.setTimeout(nextSlide, 2000)
    });
  </script>
</head>

<body>
<ul class="container">
  <li class="cell">Содержимое 1</li>
  <li class="cell">Содержимое 2</li>
  <li class="cell">Содержимое 3</li>
</ul>

  <br>
  <br>

<ul class="container">
  <li class="cell">Содержимое 1</li>
  <li class="cell">Содержимое 2</li>
  <li class="cell">Содержимое 3</li>
</ul>


</body>
</html>

snovapavel · #5 (**permalink**) 09.11.2016, 11:41

Уважаемый, Рони, может этот класс «.showing» можно как-нибудь автоматически назначать в самом начале первому элементу?

Большое спасибо за помощь!

рони · #6 (**permalink**) 09.11.2016, 11:51

snovapavel,
смотрите код снова

snovapavel · #7 (**permalink**) 10.11.2016, 20:11

Большое спасибо!

Скажите, пожалуйста, как динамически добавить кнопки previous и next к каждому слайдеру? Чтобы не прописывать их в разметке?

А я их потом спозиционирую как нужно с помощью CSS.

Большое спасибо!

рони · #8 (**permalink**) 10.11.2016, 20:22

snovapavel,

snovapavel · #9 (**permalink**) 11.11.2016, 06:06

Да уж... Подскажете?

На старом сайте работал вот такой код:

function nextSlide() {
    goToSlide(currentSlide+1);
}

function previousSlide() {
    goToSlide(currentSlide-1);
}

var next = document.getElementById('next');
var previous = document.getElementById('previous');

next.onclick = function() {
    nextSlide();
};
previous.onclick = function() {
    previousSlide();
};

Но в новом коде, отсутствует переменная «currentSlide» и я не знаю за что зацепиться.

рони · #10 (**permalink**) 11.11.2016, 07:01

snovapavel,
был самокат, а вы просите примотать изолентой к нему панель управления, где мотор? фары? чем управлять?

Форум

Справочник

Discord чат

Курсы javascript