Jquery Code For Image Slider

Ohhh… the joys of a great image slider script. There is just something about an image slider that makes for a great landing page. Having one on your website can work wonders for traffic and conversions!

Take a look at the demo and get the code for this image slider for your website below…

Today I’m going to show you an awesome way to create a similar effect to the one Google Images uses (see below) but with a jQuery slider. This is quite a popular feature as it works well visually and is easy to use. I’ve used this technique on my blog post (listed below), so be sure to check it out.

Jquery Code For Image Slider

HTML

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>

SCSS

We are using Sass and the SCSS syntax so we can nest and use variables

:heart_decoration:

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;
  }
}

JS

Variables

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;

Animation 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();

Play and Pause 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 our interval 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 using this, 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();. 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 using this, 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();.

Leave a Comment