Author: | ddougallves |
---|---|
Views Total: | 13,506 views |
Official Page: | Go to website |
Last Update: | November 2, 2021 |
License: | 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.
<div class="carousel"> <div class="carousel-inner"> <div style="background-color: orange;" class="carousel-item"><h1>First slide</h1></div> <div style="background-color: greenyellow;" class="carousel-item"><h1>Second slide</h1></div> <div style="background-color: rgb(37, 150, 255);" class="carousel-item"><h1>Third slide</h1></div> <div style="background-color: rgb(192, 192, 192);" class="carousel-item"><h1>Fourth slide</h1></div> </div> <div class="carousel-controls"> <span class="prev"></span> <span class="next"></span> </div> <div class="carousel-indicators"></div> </div>
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 h1{ 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. That’s it.
<script src="script.js"></script>
4. Customize the autoplay interval in milliseconds.
let interval = 2000;