Написание слайдера на JS
Всем привет! Я только учусь. Искал вариант написания слайдера на ютубе. Наткнулся на англоязычного исполнителя. Вообщем и целом Div'у с картинками он задал overflow-x для скролла картинок ну и дальше сам код на JS:
const sliderWrapper = [...document.querySelectorAll('.slider-wrapper')];
const btnPrv = [...document.querySelectorAll('.btnPrv')];
const btnNext = [...document.querySelectorAll('.btnNext')];
sliderWrapper.forEach((item, i) => {
let containerDimensions = item.getBoundingClientRect();
containerWidth = containerDimensions.width;
btnNext[i].addEventListener('click', () => {
item.scrollLeft += containerWidth;
})
btnPrv[i].addEventListener('click', () => {
item.scrollLeft -= containerWidth;
})
})
А это сама верстка:
<div class="slider-wrapper">
<div class="slider-blog">
<img class="slider-blog__image" src="image/Frame1.jpg" alt="Slide 01">
<p class="slider-blog__text">The 10 most beautiful places you should visit in your life</p>
<button class="slider-blog__button btn-reset">Even more</button>
</div>
<div class="slider-blog">
<img class="slider-blog__image" src="image/Frame2.jpg" alt="Slide 02">
<p class="slider-blog__text">16</p>
<button class="slider-blog__button btn-reset">Even more</button>
</div>
<div class="slider-blog">
<img class="slider-blog__image" src="image/Frame3.jpg" alt="Slide 03">
<p class="slider-blog__text">Why New York is still our favorite city to visit</p>
<button class="slider-blog__button btn-reset">Even more</button>
</div>
<div class="slider-blog ">
<img class="slider-blog__image" src="image/Frame4.jpg" alt="Slide 04">
<p class="slider-blog__text">Clean air - clean thoughts</p>
<button class="slider-blog__button btn-reset">Even more</button>
</div>
<div class="slider-blog ">
<img class="slider-blog__image" src="image/Frame5.jpg" alt="Slide 05">
<p class="slider-blog__text">I think I forgot to turn off the iron at home</p>
<button class="slider-blog__button btn-reset">Even more</button>
</div>
<div class="slider-blog ">
<img class="slider-blog__image" src="image/Frame6.jpg" alt="Slide 06">
<p class="slider-blog__text">I’ll do it beautifully, and then I’ll take a picture</p>
<button class="slider-blog__button btn-reset">Even more</button>
</div>
</div>
Он практически не чего не объяснил, написание кода х2 с фоновой музыкой. Я не особо понял что здесь написано. Он сохранил в переменные массив с помощью оператора spread? Зачем? И почему querySelectorAll а не querySelector. Далее он перебирает с помощью forEach и функция с двумя параметрами item и i - тоже впервые с таким сталкиваюсь. Так же раньше не встречал форму записи btnNext[i] что это и как работает? Вообщем и целом, буду благодарен за подробное описание что происходит в этом коде. Спасибо
Ответы (1 шт):
querySelector- Находит один элемент и его возвращает. Так как у этого парня на странице несколько элементов и он все их хотел найти он использовал querySelectorAll - находит все требуемые элементы. И возвращает коллекцию NodeList элементов. По замыслу этого парня он хотел иметь массив найденных элементов а не NodeList. Скорее всего для того чтобы воспользоваться методами массива. Потому он взял каждый элемент коллекции NodeList и скопировал его в массив с помощью трех точек. Это можно было сделать циклом, но тогда кода было бы больше. Затем он воспользовался методом массива и начал перебирать его элементы в цикле один за другим liderWrapper.forEach((item, i) Но так как ему нужны были не только сами элементы массива но и индексы под которыми они находятся в массиве он записал так liderWrapper.forEach((item, i) в item - приходил элемент массива, а в i - попадал индекс этого элемента. Так как btnNext и btnPrv это массив с элементами. Этот парень обращался к каждому элементу массива используя его индекс btnNext[i], btnPrv[i] и подписывал их на событие клик мышки. Для того что-бы при клике сдвигать эти элементы вперед или назад соответственно.
// Создается массив контейнера слайдера и его кнопок, с целью иметь возможность разместить несколько слайдеров на одной странице
const sliderWrapper = [...document.querySelectorAll('.slider-wrapper')];
const btnPrv = [...document.querySelectorAll('.btnPrv')];
const btnNext = [...document.querySelectorAll('.btnNext')];
// В item попадает "slider-wrapper", в i индекс под которым он находится в масиве. С помощью индекса мы отличаем к какому слайдеру пренадлежит кнопка.
sliderWrapper.forEach((item, i) => {
// Определяем ширину контейнера слайдера для того, что-бы в последствии сдвигать элементы слайдера на ширину контейнера.
let containerDimensions = item.getBoundingClientRect();
containerWidth = containerDimensions.width;
// Берем по индексу из массива кнопок именно ту кнопку которая пренадлежит текущему слайдеру. И подписываем ее на событие клик что-бы по клику сдвигать элементы слайдера.
btnNext[i].addEventListener('click', () => {
// сдвигаем слайдер на ширину контейнера
item.scrollLeft += containerWidth;
})
btnPrv[i].addEventListener('click', () => {
item.scrollLeft -= containerWidth;
})
}).slider-wrapper {
display: flex;
width: 250px;
overflow-x: auto;
scroll-behavior: smooth;
}
.slider-wrapper::-webkit-scrollbar {
display: none;
}
.slider-blog {
padding: 50px;
box-sizing: border-box;
height: 200px;
border: 1px solid grey;
background-color: grey;
margin: 0 10px;
color: white;
}
.btn-group {
display: flex;
justify-content: center;
width: 250px;
margin-top: 20px;
}
.btn-group>button {
margin: 15px 0;
}<div class="slider-wrapper">
<div class="slider-blog">
a
</div>
<div class="slider-blog">
b
</div>
<div class="slider-blog">
c
</div>
<div class="slider-blog ">
d
</div>
<div class="slider-blog ">
e
</div>
<div class="slider-blog ">
f
</div>
</div>
<div class="btn-group">
<button class="btnNext">❰❰</button>
<button class="btnPrv">❱❱</button>
</div>
<div class="slider-wrapper">
<div class="slider-blog">
a
</div>
<div class="slider-blog">
b
</div>
<div class="slider-blog">
c
</div>
<div class="slider-blog ">
d
</div>
<div class="slider-blog ">
e
</div>
<div class="slider-blog ">
f
</div>
</div>
<div class="btn-group">
<button class="btnNext">❰❰</button>
<button class="btnPrv">❱❱</button>
</div>