Coding a testimonial slider from scratch

Published 06 Feb by SuperNOVA

Coding a testimonial slider from scratchMost of the company websites we make, require us to make a testimonials section (mostly all of them are written by content writers :P ) and sometimes you think a slider will be perfect for the task. But using a plugin is both extra load and un-manageable code at times. So, today we will be making a simple slider from scratch.

Structure of the slider

As always, we will be starting with a basic HTML structure used by the slider. Here is the code for the layout of the slider: Here, I have taken a parent div with an id=testimonials, there is a heading inside it with another container #test_container which contains the three .testimonial divs. Although, I have just used some text, you can freely use any kind of HTML you want as long as you handle its styling.

Making the slider beautiful.

Raw HTML is always boring and not to mention ugly, so lets add some beauty to it using some cool CSS. Here is the CSS I have used to give some basic styling to the slider. Still don’t see the testimonials? Well, its just that when we positioned the .testimonial divs the parent container #test_container’s height became 0 and that’s why you can’t see any testimonial. You can use a proper js solution which we will be implementing right now.

Controlling the height of the slider’s divs

Well, first let me show you the code then I will explain what the hell I am I doing! Ok, so now lets see what is happening inside this poorly written code:
  • We declare some variables and assign suitable values to them (ex: w is the parent div’s width).
  • We add a class of active to the first .testimonial div and the first pager to signify they are selected by default.
  • We find the maximum height of the slides and store it in mHeight (du’uh) and then we set the height of #test_container to mHeight.
  • We have also calculated the left position for each slide which I have set to intervals of ‘w’.
Now, check it out. Since #test_container is set to overflow:hidden; we will only see one testimonial. Changing the left CSS properties of the slides now appears as the sliding action of the slider.

Coding the sliding action of the slider with pagination

Add the following code inside the read() block: Pretty simple I guess, we are just adding an event listener to the ‘click’ of the .pager elements. The ‘next’ variable is the zero based index of the .pager elements which we have used in our moveIt() function. The clearInterval(t_int); part will be of use later when we have added autoplay to our slider. The moveIt() function which you have to place outside the read() block goes like this: What we are doing here is that we are calculating the left position of the current testimonial(c) and the left position of the next(desired) testimonial(n) and then we are just shifting the left positions of all the .testimonial divs by the difference (n-c). Side by side we are also taking care of the active class for the pagers as well as the .testimonial divs. Now, only one thing left is adding autoplay to our slider.

Making the slider autoplay

Put the following code inside your ready() block: We make our function run every three seconds and find out the index of the next slide and execute our moveIt() function. Check out a demo of what the above code shall produce or download the code:
DEMO DOWNLOAD
Pretty neat huh? We made a working slider with pagination and everything and it looks fairly simple I guess. I am sorry to disappoint if you were expecting more steps.

Extending the slider project

Well, this slider is very specific, it has a lot of drawbacks. You can’t add a lot of slides as that will increase the number of pagination bullets. You can remedy that by using next/prev arrows or better, give the user an option for what he wants.

You can add an option so that the user can use a custom animation. Currently, clicking a pagination stops the autoplay, you can make it restart.

So, I have to say from now on I won’t be using any jquery plugins for such small projects at least, its always better to make your own code and execute. Maybe I have left something or you have something that can make this small script better/more efficient then your comments are always welcome, and keep sharing!
  • don s

    how can you increase the number of slides?

  • Jarom Cohen

    Is it possible to add more then 1 slider on a page? If so, how? thanks!

    • Yes, its very easy to add multiple sliders on the page, by replacing any *id* you encounter in the code with a class.
      For example, change “#testimonials” to “.testimonials” and change its corresponding values in HTML and CSS.