Карусель на чистом JS
Делать карусель на чистом JS, с нуля и самому? Зачем изобретать велосипед, когда есть готовые решения, slick / owl слайдеры? На это есть, как минимум две причины:
- в учебных целях
- для выполнения тестовых заданий
При трудоустройстве, даже на вакансию HTML верстальщика, вас попросят, не просто сверстать карусель, но и привести её в действие на JS, без использования сторонних библиотек.
Пример карусели
Что делает JavaScript с элементами?
Меняет свойства у элементов, с помощью методов, при наступлении событий. Три кита, на которых держится JavaScript:
- свойства
- методы
- события
Пользователь сам запускает событие onclick, при клике по кнопке. Задача программиста, повесить событие клика на нужный элемент и написать инструкции (функцию) для браузера, что должно произойти, при клике.
HTML разметка для карусели
Создадим контейнер для картинок, вставим сами картинки и две кнопки – Вперед / Назад.
<div id="gallery">
<div class="photos">
<img src="img/woman.jpg">
<img src="img/pigs.jpg">
<img src="img/animals.jpg">
</div>
<div class="buttons">
<button class="prev">Назад</button>
<button class="next">Вперед</button>
</div>
</div>
CSS стили
#gallery{
width: 640px;
margin: 20px auto;
text-align: center;
}
#gallery .photos img{
width: 100%;
display: none;
}
#gallery .photos img:first-child{
display: block;
}
.buttons {
margin-top: 20px;
}
Логика работы карусели
Как вообще писать JS код, когда не понимаешь логики, происходящего. При нажатии на кнопку Вперед, текущая картинка исчезает, а на её месте появляется новая. В области видимости, всегда одна картинка, а где тогда остальные? А остальные, мы спрятали, задали для всех картинок display: none, оставив только первую, задав ей display: block, через псевдокласс first-child.
Подготовительные работы закончились, дальше переходим к JS.
Как сделать так, чтобы при каждом клике по кнопке Вперед, первая картинка исчезала, а появлялась вторая, а вместо второй, третья. Необходимо, переключать свойство display, между none / block, при клике по кнопке.
JS код
Делаем выборку элементов
Получим кнопки Вперед / Назад по селектору, применив метод querySelector и положим их в переменные btn_prev / btn_next.
let btn_prev = document.querySelector('#gallery .buttons .prev');
let btn_next = document.querySelector('#gallery .buttons .next');
Получим все картинки по селектору, через метод querySelectopAll и так же поместим, их в переменную images.
querySelectopAll – получает массив элементов, то есть все картинки.
let images = document.querySelectorAll('#gallery .photos img');
В массиве, элементы хранятся, уже в пронумерованном виде, начиная с нуля. Поэтому, мы можем обращаться к ним по номеру. Но сначала, создадим новую переменную и поместим в неё, номер первой картинки, той, которая имеет свойство display: block.
let i = 0; // номер текущей картинки, на экране
Обращаемся к текущей картинке и меняем ей в стилях, свойство display.
images[i].style.display = 'none'; // прячем текущую картину
Сейчас, на экране нет ни одной картинки. Каким образом, там появится следующая картинка? Нам известно, что номер следующей картинки, всегда будет больше номера предыдущей, на единицу.
i++ ; // увеличиваем переменную i на единицу
images.length – это количество картинок, которое может меняться, поэтому не нужно указывать, что у нас 3 картинки, браузер и так это знает. Мы увеличиваем счетчик i, каждый раз на единицу, до тех пор, пока не покажется последняя картинка, а затем принудительно, заставляем карусель, возвращаться снова на первую картинку. Это называется – зацикливанием.
Прописываем условие, что когда счетчик i, станет больше, чем количество, имеющихся картинок, то произойдет возврат, к текущей картинки, под номером 0.
if(i >= images.length){
i = 0; // переменная i равна 0
}
При листании картинок в обратном порядке, счетчик i, должен уменьшаться на единицу. Если значение переменной, станет меньше нуля, то в неё, надо положить номер последней картинки.
btn_prev.onclick = function(){
images[i].style.display = 'none';
i = i - 1;
if(i < 0){
i = images.length - 1;
}
images[i].style.display = 'block';
}
Вычитаем из общего количества images.length, единицу и получаем картинку под номером 2. Это и будет последняя картинка, так как исчисление в программировании, начинается с нуля.
Для прохождения теста, на позицию верстальщика, необходимо уверенное понимание JS, мой видеокурс по JavaScript., как раз ориентирован на верстальщиков.
-
Создано 21.08.2019 10:15:12
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.