Scribd
Upload
435 views4 pages

Simple Vanilla Javascript Slider

A simple slider made by me that you can use in any website app project. This is a vanilla JS approach.

Uploaded by

Bogdan Marian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
435 views4 pages

Simple Vanilla Javascript Slider

A simple slider made by me that you can use in any website app project. This is a vanilla JS approach.

Uploaded by

Bogdan Marian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

// Slider script

window.onload = function(){

let slides = [document.querySelector('.slide1'),


document.querySelector('.slide2'), document.querySelector('.slide3')];

// Start the slider at 0


let start_slide = 0;

// Get array slider length


let slides_length = slides.length;

// Main method to go through the slides one by one


let getSlides = ()=>{

// Give the current slide an inactive class


slides[start_slide++].className = "inactive";

if(start_slide >= slides_length){


// Reset slides current inactive state
slides[0].className = "slide1 active";
slides[1].className = "slide2 active";
slides[2].className = "slide3 active";
// Reset slide count if we reach the end of the array
start_slide = 0;
}

//setInterval(getSlides, 4000);

// Next btn

const nextBtn = document.querySelector('.next');


nextBtn.addEventListener('click', function(){
// Give the current slide an inactive class
slides[start_slide++].className = "inactive";

if(start_slide >= slides_length){


// Reset slides current inactive state
slides[0].className = "slide1 active";
slides[1].className = "slide2 active";
slides[2].className = "slide3 active";
// Reset slide count if we reach the end of the array
start_slide = 0;
}

console.log(start_slide);
});

// Prev btn
const prevBtn = document.querySelector('.previous');
prevBtn.addEventListener('click', function(){
// Give the current slide an inactive class
slides[start_slide--].className = "inactive";
if(start_slide >= 0){
// Reset slides current inactive state
slides[0].className = "slide1 active";
slides[1].className = "slide2 active";
slides[2].className = "slide3 active";
// Reset slide count if we reach the end of the array
start_slide = 0;
}
console.log(start_slide);

});
};

body {
background: #2b2b2b;
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: Helvetica neue, roboto;
}

h1 {
color: #bdbdbd;
font-weight: 300;
}

#slider-wrapper{
position:relative;
margin:0 auto;
max-width:510px;
border:2px solid #bdbdbd;
border-radius:5px;
box-shadow:0 0 5px #fff;
overflow:hidden;
max-height:355px;
}

.slide1 h3,.slide2 h3,.slide3 h3{


color:#bdbdbd;
}

.active{
display:block;
}

.inactive{
display:none;

a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}

a:hover {
background-color: #ddd;
opacity:0.8;
transition:opacity 1s, background 1s;
color: black;
}

.previous {
position:absolute;
left:0px;
top:50%;
background-color: #f1f1f1;
color: black;
border-radius:5px;
}

.next {
position:absolute;
right:0px;
top:50%;
background-color: #f1f1f1;
color: black;
border-radius:5px;
}

<div>
<h1>JavaScript Slider</h1>

<div id="slider-wrapper">

<!-- Place buttons at the top -->


<a href="#" class="previous">&#8249;</a>
<a href="#" class="next">&#8250;</a>

<div class="slide1">
<h3>Slide 1 text</h3>
<img src="https://www.tatnews.org/wp-content/uploads/2015/09/Ko-Chang-
500x300.jpg" alt="">
</div>

<div class="slide2">
<h3>Slide 2 text</h3>
<img src="http://thailatinamerica.net/mexico/images/Ko-Samui-500x300.jpg"
alt="">
</div>

<div class="slide3">
<h3>Slide 3 text</h3>
<img src="http://pedratour.com/wp-content/uploads/2017/03/IMG_3253-
500x300.jpg" alt="">
</div>

</div>
</div>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy