Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A CodePen by Daniel Marino. Non jQuery slideshow - An easy way to use CSS transitions and simple JS to do a slideshow without loading jQuery, saving you a bunch of bytes :)
<div class="slides">
<div style="background-color:red;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:yellow;"></div>
<div style="background-color:green;"></div>
<div style="background-color:purple;"></div>
</div>
(function slideShow() {
var slides = document.querySelectorAll('.slides > *');
var length = slides.length; // Number of slides
var int = 2 // Number of seconds between slide transition
var num = 1;
var prev, next;
setInterval(function(){
// Easy way to remove all instances of .slide-out & .slide-in
for (var x = 0; x < length; x +=1 ) {
slides[x].className = '';
}
// If count is less than number of slides, increase counter by 1
if (num < length) {
prev = num - 1;
next = num;
num += 1;
// If count is equal/greater than number of slides, reset counter
} else {
prev = num - 1;
next = 0;
num = 1;
}
// Set the previous slide to .slide-out
slides[prev].className = 'slide-out';
// Set the next slide to .slide-in
slides[next].className = 'slide-in';
}, int * 1000);
// Start the slideshow
slides[0].className = 'slide-in';
}());
@import "compass";
$height: 200px;
$width: 300px;
.slides {
height: $height;
overflow: hidden;
position: relative;
width: $width;
> * {
background-size: 100%;
height: $height;
left: $width;
position: absolute;
top: 0;
@include transition(left .5s ease);
width: $width;
z-index: 1;
&.slide-in {
left: 0;
z-index: 3;
}
&.slide-out {
left: -$width;
z-index: 2;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment