Slider Show - a standalone object and image slider
What is Slider Show ?
Slider Show is a standalone image carousel and slider. You can add text and images into each item and the number of the slide, and it will switch between them. This library does not require others like JQuery and runs happily by its self.
I have tested this on mobile and the controls seem to work well, but it does not have swipe features like some other carousel's.
Preview
A preview of Slider Show
What can i use this for?
If you need a slider on your site, this could be a good option for you. If you have a couple of items that you want to show and they have a description just add this text to the following code and you are ready to go.
How to use
Install
First you need to download the file and link the script.js file in the src folder to your html document
<script src="script.js"></script>
Use
Then we create a new object for slider
This is an example for you to understand more 👇
new slider({
el : document.querySelector('#sliders'),
slideClass : 'slider',
currentSlider : (slider) => {},
auto : 3000
})
In the example above, we select the sliders with id and set the auto time 3000 it means 3 second for fade to next slide
Example
For example, we want to fade to the next slide in 3.5 Second ( auto : 3500 ) is executed :
new slider({
el : document.querySelector('#sliders'),
slideClass : 'slider',
currentSlider : (slider) => {},
auto : 3500
})
Make sure
you select all the slide elements correctly ( el : document.querySelector('#your parent slider name') )
new slider({
el : document.querySelector('#sliders'),
slideClass : 'slider',
currentSlider : (slider) => {},
auto : 3500
})
Original Source
Thanks to the author matintohidi.
Slider Show - a standalone object and image slider Demo
View Demo Full Screen View Demo New Tab
Slider Show - a standalone object and image slider Code
HTML
<div class="sliders" id="sliders">
<div class="slider active">
<div class="numbertext">1 / 3</div>
<img src="https://i.imgur.com/T3dpt9i.jpg" width="100%">
<div class="text">The text of slide one</div>
</div>
<div class="slider">
<div class="numbertext">2 / 3</div>
<img src="https://i.imgur.com/xnB9FV8.jpg" width="100%">
<div class="text">The text of slide two</div>
</div>
<div class="slider">
<div class="numbertext">3 / 3</div>
<img src="https://i.imgur.com/sBKTzFN.jpg" width="100%">
<div class="text">The text of slide three</div>
</div>
</div>
CSS
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Bebas Neue", sans-serif;
font-size: 2rem;
color: #f8f7ee;
}
.sliders {
max-width: 750px;
position: relative;
margin: auto;
}
.slider img{
border-radius: 10px;
height: 400px;
}
.slider {
display: none;
margin-top: 100px;
}
.slider.active {
display: block;
}
.prev , .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #fff;
font-weight: bold;
font-size: 22px;
transition: 0.5s ease;
border-radius: 5px;
}
.next {
right: 5px;
}
.prev {
left: 5px;
}
.prev:hover, .next:hover {
background-color: #fff;
color: #000;
}
.text {
color: #eeeeee;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
animation-name: text;
animation-duration:3s;
}
.numbertext {
color: #f2f2f2;
font-size: 16px;
padding: 8px 12px;
position: absolute;
top: 0;
left : 0;
background-color: #00000080;
border-radius: 10px 0 10px 0;
animation-name: rotate;
animation-duration:3s;
}
.dots {
text-align: center;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 4px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot:hover {
background-color: #717171;
transform: scale(.9 , .9);
transition: .2s;
}
.dot.active {
background-color: #717171;
transform: scale(1.3 , 1.3);
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes text {
0% {
bottom: 10px;
}
25% {
bottom: 0;
}
50% {
bottom: 10px;
}
75% {
bottom: 0;
}
100% {
bottom: 10px;
}
}
@keyframes rotate {
0% {
transform: rotateX(0deg);
border-radius: 10px 0 10px 0;
}
25% {
transform: rotateX(180deg);
border-radius: 0 10px 0 10px;
}
50% {
transform: rotateX(0deg);
border-radius: 10px 0 10px 0;
}
75% {
transform: rotateX(180deg);
border-radius: 0 10px 0 10px;
}
100% {
transform: rotateX(0deg);
border-radius: 10px 0 10px 0;
}
}
@media (max-width: 368px) {
.sliders {
max-width: 85%;
}
.slider img {
height: 250px;
}
.text {
font-size: 1.5rem;
}
}
@media (min-width: 368px) {
.sliders {
max-width: 70%;
}
.slider img {
height: 300px;
}
.text {
font-size: 1.7rem;
}
}
@media (min-width: 1360px) {
.sliders {
max-width: 50%;
}
.slider img {
height: 400px;
}
.text {
font-size: 2rem;
}
}
Javascript
class slider {
slideIndex = 1;
constructor(options) {
this.options = options;
this.intialStuff();
this.createNextAndPrevBtns();
this.createDots();
this.showSlides(1);
this.setAuto();
}
intialStuff() {
let { el : sliderElement , slideClass , auto} = this.options;
if(! sliderElement ) throw Error('slider element is not exists');
Number.isInteger(auto) ? this.auto = auto : this.auto = 0;
this.sliders = [...sliderElement.children].filter(elm => elm.classList.contains(slideClass));
}
createNextAndPrevBtns() {
let { el: sliderElement } = this.options;
sliderElement.insertAdjacentHTML("beforeend" , `
<a class="next">❯</a>
<a class="prev">❮</a>
`);
sliderElement.querySelector(".next").addEventListener("click" , () => this.nextAndPrevSlide(this.slideIndex += 1));
sliderElement.querySelector(".prev").addEventListener("click" , () => this.nextAndPrevSlide(this.slideIndex -= 1));
}
nextAndPrevSlide = (x) => {
this.resetAuto();
this.showSlides(x);
}
currentSlide = n => {
this.resetAuto();
this.showSlides(this.slideIndex = n);
}
createDots() {
let { el : sliderElement } = this.options;
let dotElements = [...this.sliders].map((slider , index) => `<span class="dot" data-slide="${index+1}"></span>`);
let dots = document.createElement("div");
dots.classList.add("dots");
dots.innerHTML = `${dotElements.join("")}`;
sliderElement.after(dots);
this.dots = dots.querySelectorAll(".dot");
this.dots.forEach(dot => dot.addEventListener("click" , e => this.currentSlide(parseInt(e.target.dataset.slide))));
}
showSlides(number) {
let { el : sliderElement , slideClass , currentSlider } = this.options;
if(number > this.sliders.length) this.slideIndex = 1;
if(number < 1 ) this.slideIndex = this.sliders.length;
sliderElement.querySelector(`.${slideClass}.active`).classList.remove("active");
this.dots.forEach(dot => dot.classList.remove("active"));
this.sliders[this.slideIndex-1].classList.add("active");
this.sliders[this.slideIndex-1].classList.add("fade");
this.dots[this.slideIndex-1].classList.add("active");
if(currentSlider) currentSlider(this.sliders[this.slideIndex-1]);
}
setAuto () {
if(this.auto != 0) {
this.autoID = setInterval(() => this.showSlides(this.slideIndex += 1) , this.auto);
}
}
resetAuto () {
clearInterval(this.autoID);
this.setAuto();
}
}
new slider({
el : document.querySelector('#sliders'),
slideClass : 'slider',
currentSlider : (slider) => {},
auto : 3000
})