Всем привет! Я только учусь. Искал вариант написания слайдера на ютубе. Наткнулся на англоязычного исполнителя. Вообщем и целом 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]
что это и как работает? Вообщем и целом, буду благодарен за подробное описание что происходит в этом коде. Спасибо