| рони | 10.11.2016 20:22 |
snovapavel,
Как перебирать содержимое одновременно?
Добрый день!
Есть слайдер, который перебирает, собственно, слайды: <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,
был самокат, а вы просите примотать изолентой к нему панель управления, где мотор? фары? чем управлять? |
Нужно динамически сюда добавить элементы управления - вперёд слайд и назад слайд.
Было: <ul class="container"> <li class="cell">Содержимое 1</li> <li class="cell">Содержимое 2</li> <li class="cell">Содержимое 3</li> </ul> Слало (динамически добавлять рабочие кнопки вперёд - назад): <ul class="container"> <li class="cell">Содержимое 1</li> <li class="cell">Содержимое 2</li> <li class="cell">Содержимое 3</li> <button class="controls" id="prevCell">Previous</button> <button class="controls" id="nextCell">Next</button> </ul> Это всё что нужно... |
snovapavel,
https://learn.javascript.ru/modifying-document https://learn.javascript.ru/multi-insert https://learn.javascript.ru/attribut...tom-properties Цитата:
|
| Часовой пояс GMT +3, время: 08:40. |