https://www.tlt-turbo.com/js/carousel.js

1const galleryContainer = document.querySelector('.gallery-container');
2const galleryControlsContainer = document.querySelector('.gallery-controls');
3const galleryControls = ['previous', 'next'];
4const galleryItems = document.querySelectorAll('.gallery-item');
5
6class Carousel {
7  constructor(container, items, controls) {
8    this.carouselContainer = container;
9    this.carouselControls = controls;
10    this.carouselArray = [...items];
11  }
12
13  // Update css classes for gallery
14  updateGallery() {
15    this.carouselArray.forEach(el => {
16      el.classList.remove('gallery-item-1');
17      el.classList.remove('gallery-item-2');
18      el.classList.remove('gallery-item-3');
19      el.classList.remove('gallery-item-4');
20    });
21
22    this.carouselArray.slice(0, 5).forEach((el, i) => {
23      el.classList.add(`gallery-item-${i+1}`);
24    });
25  }
26
27  // Update the current order of the carouselArray and gallery
28  setCurrentState(direction) {
29
30    if (direction.className == 'gallery-controls-previous') {
31      this.carouselArray.unshift(this.carouselArray.pop());
32    } else {
33      this.carouselArray.push(this.carouselArray.shift());
34    }
35    
36    this.updateGallery();
37  }
38
39  // Construct the carousel navigation
40  // setNav() {
41    // galleryContainer.appendChild(document.createElement('ul')).className = 'gallery-nav';
42
43    // this.carouselArray.forEach(item => {
44    //   const nav = galleryContainer.lastElementChild;
45    //   nav.appendChild(document.createElement('li'));
46    // }); 
47  // }s
48
49  // Construct the carousel controls
50  /*setControls() {
51    this.carouselControls.forEach(control => {
52      galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;
53
54      document.querySelector(`.gallery-controls-${control}`).innerText = control;
55    });
56  }*/
57 
58  // Add a click event listener to trigger setCurrentState method to rearrange carousel
59  useControls() {
60    // const triggers = [...galleryControlsContainer.childNodes];
61
62    triggers.forEach(control => {
63      control.addEventListener('click', e => {
64        e.preventDefault();
65
66        if (control.className == 'gallery-controls-add') {
67          const newItem = document.createElement('img');
68          const latestItem = this.carouselArray.length;
69          const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length)+1;
70
71          // Assign the necessary properties for new gallery item
72          Object.assign(newItem,{
73            className: 'gallery-item',
74            // src: `http://fakeimg.pl/300/?text=${this.carouselArray.length+1}`
75          });
76          newItem.setAttribute('data-index', this.carouselArray.length+1);
77
78          // Then add it to the carouselArray and update the gallery
79          this.carouselArray.splice(latestIndex, 0, newItem);
80          document.querySelector(`[data-index="${latestItem}"]`).after(newItem);
81          this.updateGallery();
82
83        } else {
84          this.setCurrentState(control);
85        }
86
87      });
88    });
89  }
90}
91
92const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);
93
94// exampleCarousel.setControls();
95// exampleCarousel.setNav();
96// exampleCarousel.useControls();