CSS autoplay slider

Demo Download

Author:Views Total:Official Page:Last Update:License:

ddougallves

2,118 views

Go to website

November 2, 2021

MIT

Preview:

Description:

A tiny, flexible, infinite-looping, auto-rotating carousel slider written in pure JS without jQuery.

How to use it:

1. Add slides together with the navigation arrows and pagination controls to the carousel.

2. The necessary CSS styles for the carousel. Feel free to override & modify the CSS rules to create your own styles.

.carousel{ height: 400px; width: 100vw; margin-top: 40px; margin-bottom: 40px; max-width: 678px; overflow-x: hidden; position: relative; display: flex; justify-content: flex-start; border-radius: 13px; } .carousel-inner{ height: 100%; /* min-width: 400%; */ display: flex; transition: all ease .5s; } .carousel-item{ flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .carousel-item h2{ opacity: .5; } .carousel-controls .prev{ display: inline-block; height: 32px; width: 32px; position: absolute; left: 12px; top: 50%; transform: translateY[-50%]; background-image: url['prev.svg']; background-position: center; background-size: auto 100%; background-repeat: no-repeat; cursor: pointer; opacity: .5; } .carousel-controls .next{ display: inline-block; height: 32px; width: 32px; position: absolute; right: 12px; top: 50%; transform: translateY[-50%]; background-image: url['next.svg']; background-position: center; background-size: auto 100%; background-repeat: no-repeat; cursor: pointer; opacity: .5; } .prev:hover, .next:hover{ opacity: 1; } .carousel-indicators{ position: absolute; bottom: 12px; left: 50%; transform: translateX[-50%]; text-align: center; } .carousel-indicators span{ display: inline-block; background-color: white; width: 30px; height: 4px; border-radius: 2px; opacity: .5; cursor: pointer; margin: 3px; } .carousel-indicators span.active{ opacity: 1; }

3. Add the main script to the bottom of the page. Thats it.

4. Customize the autoplay interval in milliseconds.

let interval = 2000;

See Also:

• Full-featured Slider/Carousel Plugin Splide
• Fullscreen 3D Carousel With JavaScript
• Draggable & Touch-friendly Carousel In Vanilla JavaScript embla-carousel
• Animated Image Slider Carousel With JavaScript
• Touchable & Accessible Slider JavaScript Library galleryLib.js
• Extended Bootstrap 5 Carousel Component In Vanilla JS
• Feature-rich Mobile-friendly Carousel Library VanillaSlider
• Feature-rich Framework-agnostic Touch Slider Library keen-slider