Advertisement
Rusfatal

Untitled

Aug 8th, 2022
1,874
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.   #countSlides; // переменная для подчета слайдов
  6.   constructor(slides) {
  7.     this.slides = slides; // в это свойство передан объект описывающий товар
  8.     this.#create_carus(); // метод для создания слайда карусели
  9.     this.#initCarousel();// метод переключения слайдов
  10.   }
  11.  
  12. #create_carus() {
  13.   const carousel = createElement(`
  14.       <div class="carousel">
  15.         <div class="carousel__arrow carousel__arrow_right">
  16.           <img src="/assets/images/icons/angle-icon.svg" alt="icon">
  17.         </div>
  18.         <div class="carousel__arrow carousel__arrow_left">
  19.           <img src="/assets/images/icons/angle-left-icon.svg" alt="icon">
  20.         </div>
  21.         <div class="carousel__inner">${createSlides.call(this)}</div>
  22.       </div>
  23.     `);
  24.  
  25.   function createSlides() {
  26.     let result = "";
  27.     this.#countSlides = 0; // свойство-счетчик слайдов
  28.     for (let slide of this.slides) {
  29.       let layout = `
  30.           <div class="carousel__slide" data-id="${slide.id}">
  31.             <img src="/assets/images/carousel/${slide.image}" class="carousel__img" alt="slide">
  32.             <div class="carousel__caption">
  33.               <span class="carousel__price">€${slide.price.toFixed(2)}</span>
  34.               <div class="carousel__title">${slide.name}</div>
  35.               <button type="button" class="carousel__button">
  36.                 <img src="/assets/images/icons/plus-icon.svg" alt="icon">
  37.               </button>
  38.             </div>
  39.          </div>
  40.        `;
  41.       this.#countSlides += 1;
  42.       result += layout;
  43.     }
  44.     return result;
  45.   };
  46.   return carousel
  47. }
  48.  
  49.   // описываем функцию переключения слайдов
  50.   #initCarousel() {
  51.     // контейнер с классом carousel
  52.     let carouselElem =   document.querySelector(".carousel");
  53.     // кнопки стрелки слева и справа
  54.     let  carouselArrowRight= carouselElem.querySelector(".carousel__arrow_right");
  55.     let  carouselArrowLeft= carouselElem.querySelector(".carousel__arrow_left");
  56.  
  57.     //  элемент-ленты, в котором находятся все слайды
  58.     let carouselinner = carouselElem.querySelector(".carousel__inner");
  59.  
  60.     // счетчик порядкового номера слайда. При движении влево уменьшается на 1.
  61.     // При движеннии вправо увеличивается на 1
  62.     let count = 1;
  63.  
  64.     // слушатель события для левой и правой кнопок
  65.     // carouselArrowRight.addEventListener("click", handler);
  66.     // carouselArrowLeft.addEventListener("click", handler);
  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.#countSlides ? carouselArrowRight.style.display = 'none' :   carouselArrowRight.style.display = '';
  95.     }};
  96.  
  97.  
  98.  
  99. // возвращаем приватное свойство
  100. get elem(){return this.#create_carus()}
  101.  
  102. }
  103.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement