Author: | rajanstha |
---|---|
Views Total: | 4,686 views |
Official Page: | Go to website |
Last Update: | August 11, 2022 |
License: | MIT |
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, }); });