(JS) Super simple slider/carousel/slideshow

Here’s how you can make a super simple slideshow that changes slides on a timer interval. You could easily edit it so any other event, like a mouse click, will trigger the slide() function.

You can see it in action HERE

HTML

[html]
<div class="slider">

<div class="slide red">
<p>THIS IS SLIDE 1</p>
</div>

<div class="slide blue">
<p>THIS IS SLIDE 2</p>
</div>

<div class="slide green">
<p>THIS IS SLIDE 3</p>
</div>

</div>
[/html]

CSS

[css]
.slider {
width: 500px;
height: 300px;
margin: 0 auto;

/* DON’T CHANGE THESE */
position: relative;
overflow: hidden;
}

.slide {
/* DON’T CHANGE THESE */
position: absolute;
width: 100%;
height: 100%;
}

/** ONLY FOR STYLING THE EXAMPLE SLIDES */
.slide p {
color: #FFF;
text-align: center;
}

.red {
background: red;
}

.blue {
background: blue;
}

.green {
background: green;
}
[/css]

jQuery

[js]
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
// Configurable values
slider = $(‘.slider’); // Slider element
slideDuration = 3000; // Duration of each slide in milliseconds
slideSpeed = 1000; // Speed of slide animation in milliseconds (must be equal of less than slideDuration)

width = slider.width();
slider.children().hide().css({left: width});
slider.children(‘:first’).show().css({left: 0});

// Slide in from the left
$.fn.slideIn = function () {
$(this).show().animate({
left: "-=" + width
}, slideSpeed / 2);
}

// Slide out to the left
$.fn.slideOut = function () {
$(this).animate({
left: "-=" + width
}, slideSpeed / 2, function () {
$(this).hide().css({left: width});
});
}

// Main slide function
function slide() {
currentSlide = slider.find(‘div:visible:first’);
nextSlide = (!slider.children(":last").is(":visible")) ? currentSlide.next() : slider.children(‘:first’);

currentSlide.slideOut();
nextSlide.slideIn();
}

// Timer function
window.setInterval(function () {
slide();
}, slideDuration);
</script>
[/js]

And of course you could make this dynamic by spitting out the slides from a database… for example like this:

[php]
<div class="slider">

<?php foreach ($slides as $slide) { ?>

<div class="slide">
<p><?php $slide[‘content’] ?></p>
</div>

<?php } ?>

</div>
[/php]