0

Всем привет! Я только учусь. Искал вариант написания слайдера на ютубе. Наткнулся на англоязычного исполнителя. Вообщем и целом 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&nbsp;most beautiful places you should visit in&nbsp;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&nbsp;still our favorite city to&nbsp;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&nbsp;think&nbsp;I forgot to&nbsp;turn off the iron at&nbsp;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&rsquo;ll do&nbsp;it&nbsp;beautifully, and then I&rsquo;ll take a&nbsp;picture</p>
                        <button class="slider-blog__button btn-reset">Even more</button>
                    </div>
                </div>

Он практически не чего не объяснил, написание кода х2 с фоновой музыкой. Я не особо понял что здесь написано. Он сохранил в переменные массив с помощью оператора spread? Зачем? И почему querySelectorAll а не querySelector. Далее он перебирает с помощью forEach и функция с двумя параметрами item и i - тоже впервые с таким сталкиваюсь. Так же раньше не встречал форму записи btnNext[i] что это и как работает? Вообщем и целом, буду благодарен за подробное описание что происходит в этом коде. Спасибо

1

1 ответ 1

0

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">&#10096;&#10096;</button>
  <button class="btnPrv">&#10097;&#10097;</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">&#10096;&#10096;</button>
  <button class="btnPrv">&#10097;&#10097;</button>
</div>

10
  • Здравствуйте. Сама верстка слайдера такая: <div class = "slider-wrapper"> <div class="slider-blog"> </div> <div class="slider-blog"> </div> <div class="slider-blog"> </div> <div class="slider-blog"> </div> <div> то есть item - элемент, а эти элементы это дивы с классом slider-blog?Так? То есть дочерние элементы родительского блока?
    – Hakkensha
    19 янв в 18:33
  • @Hakkensha Выложите весь код в вопрос. Скорее всего Вы не правильно его переписали.
    – Andrei
    19 янв в 19:25
  • Прикрепил, спасибо
    – Hakkensha
    19 янв в 20:14
  • @Hakkensha В верстке slider-wrapper это один элемент, соответственно такого кода не может быть const sliderWrapper = [...document.querySelectorAll('.slider-wrapper')]; и его нельзя перебирать в sliderWrapper.forEach смысла в этом нет. Что-то в этом коде не так...
    – Andrei
    19 янв в 20:36
  • Вот и я о том же))) Но у этого чела именно так и написано. И это работает. Я пробовал писать просто document.querySelector то консоль уже ругается и конечно слайдер перестает работать(
    – Hakkensha
    19 янв в 20:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.