Как перебирать содержимое одновременно?
Добрый день!
Есть слайдер, который перебирает, собственно, слайды: <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? Большое спасибо! |
Цитата:
Цитата:
|
А как циклом? Он их по очереди листает. Сначала один контейнер ul потом второй, а синхронно оба не хочет
|
синхронизация слайдеров
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> |
Уважаемый, Рони, может этот класс «.showing» можно как-нибудь автоматически назначать в самом начале первому элементу?
Большое спасибо за помощь! |
snovapavel,
смотрите код снова |
Большое спасибо!
Скажите, пожалуйста, как динамически добавить кнопки previous и next к каждому слайдеру? Чтобы не прописывать их в разметке? А я их потом спозиционирую как нужно с помощью CSS. Большое спасибо! |
snovapavel,
|
Да уж... Подскажете?
На старом сайте работал вот такой код: 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» и я не знаю за что зацепиться. |
snovapavel,
был самокат, а вы просите примотать изолентой к нему панель управления, где мотор? фары? чем управлять? |
Часовой пояс GMT +3, время: 00:27. |