Advertisement
Rusfatal

Untitled

Aug 9th, 2022
811
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import createElement from '../../assets/lib/create-element.js';
  2.  
  3. export default class Carousel {
  4.   #carus; // создаем приватное свойство
  5.   #number_of_slides; // приватное свойство для количетсва слайдов
  6.   constructor(slides) {
  7.     this.slides = slides; // в это свойство передан объект описывающий товар
  8.     this.#create_carus(); // метод для создания слайда карусели
  9.     this.#initCarousel();// метод переключения слайдов
  10.   }
  11.  
  12.  
  13. #create_carus() {
  14.     // создаем ссылку на создание ДОМ элемента-контейнера, куда дальше будем помещать слайды
  15.   // (слайды будем помещать сюда <div class="carousel__inner"> СЛАЙДЫ СЮДА </div>)
  16.   // и помещаем ее в приватное своейство класса #carus
  17.   this.#carus = createElement(`
  18.       <div class="carousel">
  19.         <div class="carousel__arrow carousel__arrow_right">
  20.           <img src="/assets/images/icons/angle-icon.svg" alt="icon">
  21.         </div>
  22.         <div class="carousel__arrow carousel__arrow_left">
  23.           <img src="/assets/images/icons/angle-left-icon.svg" alt="icon">
  24.         </div>
  25.         <div class="carousel__inner"></div>
  26.       </div>
  27.     `);
  28.  
  29.   // в переменную slides передаем массив сделанный перебором элементов массива slides
  30.   let slides =  this.slides.map(item => createElement(`
  31.       <div class="carousel__slide" data-id="${item.id}">
  32.         <img
  33.           src="/assets/images/carousel/${item.image}"
  34.           class="carousel__img"
  35.           alt="slide"
  36.         />
  37.         <div class="carousel__caption">
  38.           <span class="carousel__price">€${item.price.toFixed(2)}</span>
  39.           <div class="carousel__title">${item.name}</div>
  40.           <button type="button" class="carousel__button">
  41.             <img src="/assets/images/icons/plus-icon.svg" alt="icon" />
  42.           </button>
  43.         </div>
  44.       </div>`));
  45.     console.log(slides);
  46. // в созданном свойстве класса this.#carus содержится ДОМ элемент куда надо вставить слайды
  47.   // находим в этом ДОМ элементе тег div с классом carousel__inner и добавляем в него последовательно все элементы массива slides
  48.     this.#carus.querySelector(`.carousel__inner`).append(...slides);
  49.             }
  50.  
  51.   // описываем приватную функцию переключения слайдов
  52.   #initCarousel() {
  53.     // ссылка на ДОМ элемент со слайдами находится в переменной this.#carus
  54.     let carouselElem = this.#carus;
  55.     // кнопки стрелки слева и справа
  56.     let  carouselArrowRight= carouselElem.querySelector(".carousel__arrow_right");
  57.     let  carouselArrowLeft= carouselElem.querySelector(".carousel__arrow_left");
  58.  
  59.     //  элемент-ленты, в котором находятся все слайды
  60.     let carouselinner = carouselElem.querySelector(".carousel__inner");
  61.  
  62.     // счетчик порядкового номера слайда. При движении влево уменьшается на 1.
  63.     // При движеннии вправо увеличивается на 1
  64.     let count = 1;
  65.  
  66.     // слушатель события для левой и правой кнопок
  67.     carouselElem.addEventListener("click", handler);
  68.  
  69.     // начальные состояния кнопок
  70.     carouselArrowRight.style.display = '';
  71.     carouselArrowLeft.style.display = 'none';
  72.  
  73.     // ширина окна
  74.     let width = carouselinner.offsetWidth;
  75.  
  76.     let transition = 0;
  77.     // функция выполняющаяся при клике на стрелки
  78.     function handler(e) {
  79.       // если клик случился на правой стрелке
  80.       if (e.target===carouselArrowRight) {
  81.         transition += width;
  82.         carouselinner.style.transform = `translateX(-${transition}px)`;
  83.         count++;
  84.       }
  85.       // если клик случился на левой стрелке
  86.       else if (e.target===carouselArrowLeft) {
  87.         transition -= width;
  88.         carouselinner.style.transform = `translateX(-${transition}px)`;
  89.         count--};
  90.  
  91.       // если счетчик слайдов count дошел до 1 то скрываем левую стрелку
  92.       count === 1 ? carouselArrowLeft.style.display = 'none' :   carouselArrowLeft.style.display = '';
  93.       // если счетчик слайдов count дошел до 4 то скрываем правую стрелку
  94.       count >=  this.slides.length ? carouselArrowRight.style.display = 'none' :   carouselArrowRight.style.display = '';
  95.     }}
  96.  
  97.  
  98.  
  99. // возвращаем приватное свойство
  100. get elem(){return this.#carus}
  101.  
  102. }
  103.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement