How many JS plugins are available for an interactive timed slider?

I had a look, there are thousands. I figure if you’re going to use someone’s code, you need to know how it works, and sometimes just writing your own is a better learning experience.

So I decided to make my own. I thought I’d share the experience so that people can learn from it.

 

The HTML

 

First you start with your HTML markup with some classes to work with, here you go:

<div class=”slider”>
<div class=”slidercontainer”>
<div class=”sliderspot spot1″> </div>
<ul id=”sliderul”>
<li class=”slidercontent”> “The first quotation.”
<span> This first author. </span> </li>
<li class=”slidercontent”> “The second quotation.” <span> The second author. </span> </li>
</ul>
<div class=”sliderspot spot2″> </div>
</div>
</div>

You can see that we have a div for the whole slider, a container to help with spacing, two spots that will be used as buttons, and an unordered list with our content.

 

The CSS

 

Let’s add some CSS to this to make it look ok, at least on a large screen. (you will need to add some media queries to make this more responsive.) Here you go:

.slider {
width: 100%;
background-color: lightgray;
margin: 10px auto;
height: 200px;
}

.slidercontainer {
width: 85%;
height: 200px;
margin: 0px auto;
}

.sliderspot {
width: 15px;
height: 15px;
border-radius: 100%;
background-color: gray;
display: inline;
cursor: pointer;
cursor: hand;
}

.sliderspot:hover {
background-color: black;
}

.spot1 {
margin: 85px 30px;
float: left;
}

.spot2 {
margin: 85px 30px;
float: right;
}

#sliderul {
list-style-type: none;
margin-left: 4%;
width: 75%;
text-align: center;
height: 150px;
padding: 10px;
line-height: 30px;
display: inline-block;
}

.slidercontent {
margin-top: 20px;
font-size: 20px;
color: #1D1F20;
}

.slidercontent span {
font-size: 18px;
display: block;
margin-top: 10px;
color: #343436;
}

This is going to make our slider look something like this (my content added):

slider2

Nice and simple for now, later you can make it look a little fancier, but I quite like my stuff to look pretty basic when I’m going to start adding interactivity. I don’t want anything to fancy just yet.

 

The Interactivity 

 

On to the JQuery/ JS.

1. Make all content disappear, then fadeIn just the first quote.

$(“.slidercontent”).hide();

$(“.slidercontent:nth-child(1)”).fadeIn(“slow”);

2. Create some variables to control which child we are going to access. We’ll start at one, and define max as the number of children +1. I’ll explain the add 1 below.

var current = 1;
var max = $( “li” ).length +1;

3. Create a function that will hide all slider li’s and then show the sibling of the previous li shown. We do this by adding 1 to our current value, and showing that child. If the child reaches the last one, then it will reset to 1 and start again from the beginning.

function changeUp() {
$(“.slidercontent”).hide();
current += 1;
if (current === max) {
current = 1;
}
$(“.slidercontent:nth-child(” + current + “)”).fadeIn(“slow”);
}

4. Create a very similar function to change down. I’ll let you work this one out yourself.

function changeDown() {
$(“.slidercontent”).hide();
current -= 1;

if (current === 0) {
current = max – 1;
}

$(“.slidercontent:nth-child(” + current + “)”).fadeIn(“slow”);
}

5. Use click event handlers to attach these to our “spots” that will then navigate up and down our quotes.

$(“.sliderspot2”).click(function() {
changeUp();
});

$(“.sliderspot”).click(function() {
changeDown();
});

If you’re feeling good, add some automatic timing.

Make the changeUp function happen every 10 seconds, and wrap this in a function to call it when you want.

function startChange() {
changeIt = setInterval(function(){
changeUp();
}, 10000);
};

Next let’s make a function to stop the automatic change so we can call it when we want.

function stopChange() {
clearInterval(changeIt);
}

Now all you have to do to get it working is call the startChange() function at the beginning of your code so when the document loads, it starts changing.

Some added extras for UI

The problem now is that if a user changes the quote, it might stay for just a few seconds before the automatic timing kicks in and changes the quote. So, lets modify our click handlers to stop the automatic timing, change the quote, then restart the automatic timing so it stays for 10 seconds.

$(“.sliderspot2”).click(function() {
stopChange();
changeUp();
startChange();
});

$(“.sliderspot”).click(function() {
stopChange();
changeDown();
startChange();
});

 

All Done!

 

Tadaa……. You just made a JQuery slider all by yourself. You can see it at the codepen here, or a nice example with some testimonials on my portfolio page here.