Building A Simple Slider - ashish9342/FreeCodeCamp GitHub Wiki
This tutorial will walk you through building an image slider using the jQuery library.
This tutorial will have four parts:
We will be using Bootstrap for this tutorial to keep things looking good, without spending a lot of time.
Our structure will be as follows:
<div class="container">
<!-- The wrapper for our slider -->
<div class="slider">
<ul class="slides"><!-- Each image will be inside this unordered list --></ul>
</div>
<div class="buttons"><!-- Pause and play buttons will go in here --></div>
</div>
Inside our ul
with the class of slides
we will have the following:
<li class="slide"><img src="#" /></li>
<li class="slide"><img src="#" /></li>
<li class="slide"><img src="#" /></li>
<li class="slide"><img src="#" /></li>
<li class="slide"><img src="#" /></li>
Inside our .buttons
class you should have the following:
<button type="button" class="btn btn-default pause">
<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" class="btn btn-default play">
<span class="glyphicon glyphicon-play"></span>
</button>
Here is an example of what your html
should look like:
Note: You should replace the image
src
attribute with your own content.
<div class="container">
<div class="slider">
<ul class="slides">
<li class="slide"><img src="https://unsplash.it/1280/720/?image=120" /></li>
<li class="slide"><img src="https://unsplash.it/1280/720/?image=70" /></li>
<li class="slide"><img src="https://unsplash.it/1280/720/?image=50" /></li>
<li class="slide"><img src="https://unsplash.it/1280/720/?image=170" /></li>
<li class="slide"><img src="https://unsplash.it/1280/720/?image=190" /></li>
</ul>
</div>
<div class="buttons">
<button type="button" class="btn btn-default pause">
<span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" class="btn btn-default play">
<span class="glyphicon glyphicon-play"></span>
</button>
</div>
</div>
We are using Sass and the SCSS syntax so we can nest and use variables 💟
We can use the following SCSS to define our styling:
// Variables
$width: 720px;
.slider {
width: $width;
height: 400px;
overflow: hidden;
margin: 0 auto;
text-align: center;
.slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
.slide {
float: left;
list-style-type: none;
width: $width;
height: 400px;
img {
width: 100%;
height: 100%;
}
}
}
.buttons {
margin: 0;
width: $width;
position: relative;
top: -40px;
margin: 0 auto;
.play {
display: none;
}
.btn {
display: flex;
margin: 0 auto;
text-align: center;
}
}
In the following code snippet, we define variables used later in our code.
var animationSpeed = 1000; // How quickly the next slide animates.
var pause = 3000; // The pause between each slide.
We will use a blank variable where we will call the setInterval
method:
var interval;
We will wrap our slider animations inside a function:
function startSlider() {}
We are using the setInterval()
native JavaScript method to automate the contents of the function on a time based trigger.
interval = setInterval(function() {}, pause);
We use the pause
variable to see how many milliseconds to wait before calling the function again.
Read more on the native setInterval
method here: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval.
Inside our function we will use jQuery to fade between slides at the speed of the animationSpeed variable:
$('.slides > li:first')
.fadeOut(animationSpeed)
.next()
.fadeIn(animationSpeed)
.end()
.appendTo('.slides');
- We are targeting the first slide using
$('.slides > li:first')
. -
.fadeOut(animationSpeed)
will fade the first slide out and then using.next()
, we move to the next slide. - Once we have moved to the next slide, we will fade it in:
.fadeIn(animationSpeed)
. - This sequence will continue until the last slide (
.end()
), then we stop the animation.
We will now call the startSlider
function to start the animation:
startSlider();
This feature is optional, but quite easy to implement.
We will hide the play button, so we don't see both the play and pause buttons:
$('.play').hide(); // Hiding the play button.
We will now create our pause button (automatically shown on page load):
$('.pause').click(function() {
clearInterval(interval);
$(this).hide();
$('.play').show();
});
- We will call our function every time the pause button is clicked using jQuery.
- We will remove the interval using the
clearInterval
method and using ourinterval
variable as the parameter, indicating which interval to stop. - Because our slider is paused, we will hide the pause button using
$(this).hide();
. Note: we are usingthis
, which will refer to what our parent is calling i.e..pause
. - We will then show our play button so the user can resume the animation:
$('.play').show();
.
- We will remove the interval using the
The following code sets up our play button (automatically hidden on page load):
$('.play').click(function() {
startSlider();
$(this).hide();
$('.pause').show();
});
- We will call our function every time the play button is clicked using jQuery.
- We will start or restart the interval using the
startSlider
function. - Because our slider is currently playing, we will hide the play button using
$(this).hide();
. Note: we are usingthis
, which will refer to what our parent is calling i.e..play
. - We will then show our pause button so the user can stop the animation at will:
$('.pause').show();
.
- We will start or restart the interval using the
- Checkout the source code and example on CodePen for this tutorial.