Cool Image Slider Carousel With JavaScript And Tailwind CSS

Preview:

Description:

A pretty cool image slider carousel written in vanilla JavaScript and styled with Tailwind.css.

How to use it:

1. Import the CoolKidsSlider component.

import CoolKidsSlider from './CoolKidsSlider.js';

2. Import the necessary CSS.

@tailwind base;
@tailwind components;
@tailwind utilities;
img {
  @apply max-w-full h-auto bg-slate-300;
}
/*
 * cool-kids-slider.css
 This css handles css for the cool-kids-slider element
*/
.js-slider-items.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.js-slider-items {
  @apply relative transition-transform duration-[1000ms] delay-200;
}

3. The required HTML structure.

<div class="js-slider-wrapper overflow-hidden">
  <div class="relative flex flex-row js-slider-items max-w-full">
    <!-- Slider Items -->
    <div class="js-slider-item min-w-full">
      <figure class="relative group">
        <img src="./slider-img.jpeg" alt="texture" width="1920" height="1080">
        <figcaption class="absolute inset-3 top-auto m-4 bg-slate-700 bg-opacity-80 px-5 py-2 text-white text-xl md:text-2xl">Slide Item 1</figcaption>
      </figure>
    </div>
    <div class="js-slider-item min-w-full">
      <figure class="relative group">
        <img src="./slider-img-2.jpeg" alt="train track" width="1920" height="1080">
        <figcaption class="absolute inset-3 top-auto m-4 bg-slate-700 bg-opacity-80 px-5 py-2 text-white text-xl md:text-2xl">Slide Item 2</figcaption>
      </figure>
    </div>
    <div class="js-slider-item min-w-full">
      <figure class="relative group">
        <img src="./slider-img-3.jpeg" alt="art" width="1920" height="1080">
        <figcaption class="absolute inset-3 top-auto m-4 bg-slate-700 bg-opacity-80 px-5 py-2 text-white text-xl md:text-2xl">Slide Item 3</figcaption>
      </figure>
    </div>
    <div class="js-slider-item min-w-full">
      <figure class="relative group">
        <img src="./slider-img-4.jpeg" alt="art" width="1920" height="1080">
        <figcaption class="absolute inset-3 top-auto m-4 bg-slate-700 bg-opacity-80 px-5 py-2 text-white text-xl md:text-2xl">Slide Item 4</figcaption>
      </figure>
    </div>
    <div class="js-slider-item min-w-full">
      <figure class="relative group">
        <img src="./slider-img-5.jpeg" alt="art" width="1920" height="1080">
        <figcaption class="absolute inset-3 top-auto m-4 bg-slate-700 bg-opacity-80 px-5 py-2 text-white text-xl md:text-2xl">Slide Item 5</figcaption>
      </figure>
    </div>
  </div>
  <!-- Slider Controls -->
  <div class="flex justify-center items-center leading-none gap-2 pt-4">
    <button class="js-slider-prev-button hover:opacity-70 disabled:opacity-50" aria-label="Previous">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="w-7" aria-hidden="true"><path d="M28.05 36 16 23.95 28.05 11.9l2.15 2.15-9.9 9.9 9.9 9.9Z"/></svg>
    </button>
    <div class="js-slider-dots-navigation flex gap-2">
      <button class="js-slider-dot-button w-3 h-3 rounded-full bg-slate-900 hover:opacity-75" aria-label="Slider 1"></button>
      <button class="js-slider-dot-button w-3 h-3 rounded-full bg-slate-900 hover:opacity-75" aria-label="Slider 2"></button>
      <button class="js-slider-dot-button w-3 h-3 rounded-full bg-slate-900 hover:opacity-75" aria-label="Slider 3"></button>
      <button class="js-slider-dot-button w-3 h-3 rounded-full bg-slate-900 hover:opacity-75" aria-label="Slider 3"></button>
      <button class="js-slider-dot-button w-3 h-3 rounded-full bg-slate-900 hover:opacity-75" aria-label="Slider 3"></button>
    </div>
    <button class="js-slider-next-button hover:opacity-70 disabled:opacity-50" aria-label="Next">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="w-7" aria-hidden="true"><path d="m18.75 36-2.15-2.15 9.9-9.9-9.9-9.9 2.15-2.15L30.8 23.95Z"/></svg>
    </button>
  </div>
</div>

4. Initialize the slider.

window.addEventListener('load', () => {
  const slider = new CoolKidsSlider({
    selector: document.querySelector('.js-slider-wrapper')
  });
});

5. Determine whether to enable Autoplay.

window.addEventListener('load', () => {
  const slider = new CoolKidsSlider({
    selector: document.querySelector('.js-slider-wrapper'),
    autoPlay: true,
    autoPlaySpeed: 4000,
    autoPlayDirection: "forward", // or 'backward'
  });
});

6. Determine whether to enable Infinite Loop. Default: false.

window.addEventListener('load', () => {
  const slider = new CoolKidsSlider({
    selector: document.querySelector('.js-slider-wrapper'),
    infinite: true,
  });
});

7. Set the initial slide index. Default: 0 (slide 1).

window.addEventListener('load', () => {
  const slider = new CoolKidsSlider({
    selector: document.querySelector('.js-slider-wrapper'),
    activeIndex: 1,
  });
});