Carousel / Slider

This is an experimental carousel, it works, but not perfectly. You can view the code here Scroll-Snap-Slider.

These sliders and carousels are made with `scroll-snap` property for CSS, if you want to learn more about it, just click here.

---

Default slider with dots

1

2

3

4

5

6

HTML

<div class="slider">
  <div class="content-slider">
    <div class="slide">...</div>
    <div class="slide">...</div>
    <div class="slide">...</div>
  </div>
  <div class="dots"></div>
</div>

Javascript

const slider = document.querySelector(".content-slider");
const scrollSlide = document.querySelectorAll(".slide");

// Dots
if (slider.childElementCount >= 2) {
  const dots = document.querySelector(".dots");
  for (let index = 0; index < scrollSlide.length; index++) {
    const tag = document.createElement("span");
    tag.classList.add("dot");
    dots.appendChild(tag);
    dots.firstChild.classList.add("active");
    tag.addEventListener("click", () => {
      slider.scrollLeft = slide.scrollWidth * index;
    });
    tag.addEventListener("click", () => {
      let i;
      const x = document.getElementsByClassName("dot");
      for (i = 0; i < x.length; i++) {
        x[i].classList.remove("active");
      }
      tag.classList.add("active");
    });
  }
}

for (let index = 0; index < scrollSlide.length; index++) {
  var slide = scrollSlide[index];
}

---

Default slider with arrows

1

2

3

4

5

6

HTML

<div class="slider">
  <span class="btn-slide prev">
    <icon />
  </span>
  <div class="content-slider">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
  </div>
  <span class="btn-slide next">
    <icon />
  </span>
</div>

Javascript

const slider = document.querySelector(".content-slider-two");
const left = document.querySelector(".prev");
const right = document.querySelector(".next");
const scrollSlide = document.querySelectorAll(".slide-two");

for (let index = 0; index < scrollSlide.length; index++) {
  var slide = scrollSlide[index];
}

left.addEventListener("click", () => {
  slider.scrollLeft -= slide.scrollWidth;
  console.log((slider.scrollLeft -= slide.scrollWidth));
});

right.addEventListener("click", () => {
  slider.scrollLeft += slide.scrollWidth;
  console.log((slider.scrollLeft += slide.scrollWidth));
});

---

Carousel

1

2

3

4

5

6

7

8

HTML

<div class="carousel">
  <div class="btn-carousel prev">
    <ChevronLeftIcon />
  </div>
  <div class="content-carousel">
    <div class="carousel-item">1</div>
    <div class="carousel-item">2</div>
    <div class="carousel-item">3</div>
    <!-- ... -->
  </div>
  <div class="btn-carousel next">
    <ChevronRightIcon />
  </div>
</div>

Javascript

const carousel = document.querySelector(".content-carousel");
const scrollCarousel = document.querySelectorAll(".carousel-item");
const carLeft = document.querySelector(".btn-carousel.prev");
const carRight = document.querySelector(".btn-carousel.next");

for (let index = 0; index < scrollCarousel.length; index++) {
  var carouselItem = scrollCarousel[index];
}

carLeft.addEventListener("click", () => {
  carousel.scrollLeft -= carouselItem.scrollWidth;
  console.log("carousel left", (carousel.scrollLeft -= carouselItem.scrollWidth));
});

carRight.addEventListener("click", () => {
  carousel.scrollLeft += carouselItem.scrollWidth;
  console.log("carousel right", (carousel.scrollLeft += carouselItem.scrollWidth));
});