Simple Image Slider with jQuery and CSS3

Today, in this article, we will learn to create a simple Image Slider with CSS3. Well, I would have loved to use the term ‘pure CSS3’ here, but it is actually not. We will be using jQuery for some of the functionality. And if you find jQuery a little difficult, don’t worry! The use of jQuery in this image slider is quite little; you will easily understand the codes and the implementation will not be a problem.

So, how is this image slider different from so many others already available? In this slider apart from the image in the preview box, you also get the blurred image as the background. And this background image keeps on changing just as you change the image in preview. Below the preview box you get the slider which contains all the images. And you can use your mouse wheel to scroll the thumbnails horizontally. Sounds good? Just have a look at this slider before we begin the tutorial.

img-slider

Demo – CSS & jQuery Image slider

Now, since in this slider I will use some of the CSS3 to achieve the effects like blurred image and box-shadow, it will not work with older browsers specially internet explorer 8 or earlier. But there will not be the issue in image preview box and image slider.

HTML Markup

As with all my tutorials, we will start with the html markup. Here is the head section where we need to add the jQuery, mousewheel extension of jQuery and a custom script file apart from the external style sheet.

<head>   
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script src="jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="script.js"></script>   
</head>

Moving on, here is the html code inside the body tags.

<div>   
      <img id="main-img" src="#" />
      <div id="imageContainer">
        <ul id="imageBox">
            <li>
                <img src="flower1.jpg" alt="Flower" /></li>
            <li>
                <img src="flower2.jpg" alt="Flower" /></li>
            <li>
                <img src="flower3.jpg" alt="Flower" /></li>
            <li>
                <img src="flower4.jpg" alt="Flower" /></li>
              -----------------------
              -----------------------
        </ul>
    </div>
</div>

We are keeping everything inside a division with ‘contents’ class. This division acts as a wrapper for keeping the margin uniform and aligning the contents centrally. The previewed image is defined with ‘main-img’ id. Note here, that we are not defining the image source as we will dynamically define it in our script.

For keeping the thumbnails of the images in library, we are using a division with ‘imageContainer’ id. All the images are listed with unordered list with id ‘imageBox’. Inside this, you are free to keep any number of images wrapped with <li> tags.

As you can see, there is nothing special, just clean and easy to create html markup.

Now let’s check out the interesting CSS codes.

html
{   
    min-height: 100%;
    background-size: cover;
    box-shadow: inset 0 0 0 100em rgba(220,220,220,0.8);
}

.contents
{
    width: 700px;
    margin: 30px auto;
    text-align: center;
}

We are defining the min-height of html as 100% and background-size to cover to make the background image scale and cover the entire page. But where is the background image defined? Well, we are not defining it here, just as our preview image; the background image will also be defined on the fly with JavaScript. The interesting CSS trick is the back-shadow. For making the background image opaque, we are covering the entire image with inset box shadow. As you can see, the shadow color is defined with rgba with alpha value equal to 0.8. So the shadow takes over the 80% of transparency and the background image is visible by 20% only. The spread value in box-shadow is defined as 100em (which is huge) for covering the entire background.

For center aligning the contents division, the width is defined as 700px and margin is set to auto. Now let’s look at the CSS code for the previewed image.

#main-img
{
    background-color: #F2F2F2;
    padding: 10px;
    height: 300px;
    box-shadow: 0px 25px 19px -18px #545454;   
}

The background color here serves as the border as we are defining a padding of 10px. During the transition of images, we don’t want to disturb the slider position; hence we are defining a fixed height of 300px.
Let’s now look at the CSS of imageContainer class.

#imageContainer
{
    width: 650px;
    margin: 30px auto 10px auto;
    position: relative;
}

#imageContainer:before
{
    content: '';
    width: 30px;
    box-shadow: 20px 0 20px -10px #000000;
    position: absolute;
    top: -10px;
    left: -30px;
    bottom: -10px;
    z-index: 2;
}

#imageContainer:after
{
    content: '';
    width: 30px;
    box-shadow: -20px 0 20px -10px #000000;
    position: absolute;
    top: -10px;
    right: -30px;
    bottom: -10px;
    z-index: 2;
}

For aesthetic purpose, there are two shadows introduced at the beginning and end of imageContainer division. This is being achieved with :before and :after pseudo classes. For using pseudo class, the parent class must have position:relative. The location of the shadows is precisely achieved with attribute position:absolute and then defining the top, right and bottom properties. Finally, want to keep the shadow above imageContainer which is achieved with z-index value 2.

Now let’s move on to the thumbnail images inside the <ul> with imageBox ID.

#imageBox
{
    padding: 10px;
    background-color: rgba(0,0,0,0.2);
    list-style: none;
    white-space: nowrap;
    overflow-x: scroll;
}

#imageBox li
{
    display: inline-block;
    margin: 0 10px 0 0;
}
#imageBox img
{
    width: 120px;
    cursor: pointer;
    border: 4px solid #FFFFFF;
}

In imageBox, there are three important CSS properties. Property white-space with nowrap value ensures that the thumbnail images are displayed horizontally in a single line. But apart from this, we also need to set the display property of list items to inline-block. The overflow-x:scroll introduces a slider just below the images in case the combined width of thumbnails are more than the width of imageContainer. For individual image, we are defining the width of image and the cursor is set to pointer to make it look like a hyperlink.

For webkit browsers like Google Chrome, we can set the style of scroll bars also. Here is the CSS code.

#imageContainer ::-webkit-scrollbar
{
    height: 8px;
    background-color: rgba(100,0,0,0.3);
    border-radius: 5px;
}
#imageContainer ::-webkit-scrollbar-thumb
{
    background: #fff;
}
#imageContainer ::-webkit-scrollbar-thumb:window-inactive
{
    background: #aaa;
}

We are defining the background color and the background color of scroll bar in active and inactive state here.

So, that was all about the CSS part. We are left with some scripting work now. So, here is the JavaScript code for script.js file.

$(document).ready(function (event) {
    var first_img = $('#imageContainer li:first img')
    var imageContainer = $("#imageContainer");
    $("#main-img").attr("src", $(first_img).attr("src"));
    $("html").css("background-image", "url(" + $(first_img).attr("src") + ")");

    $("#imageBox img").click(function () {
        $("#main-img").attr("src", $(this).attr("src"));
        $("html").css("background-image", "url(" + $(this).attr("src") + ")");
        $("#main-img").fadeOut(0);
        $("#main-img").fadeIn(1000);     
    });

    imageContainer.find('ul').on('mousewheel', function (e, delta) {
        this.scrollLeft -= (delta * 50);
        e.preventDefault();
    });
})

There are three basic functions in this script.

  1. When the file loads completely, show the 1st image in imageContainer as the preview and background image. First we are defining the first image inside the list with first_mg variable and then setting the “src” and “background-image” properties of main_img and html to the “src” of first_img.
  2. When any thumbnail image inside the imageBox is clicked, change the background image and preview image with fade-in effect. Here, first we are fading out the image immediately then fading in slowly with a time delay of 1000 ms (1 second).
  3. Introduce the mouse wheel control with the slider in imageContainer. With single mouse wheel action, the scroll bar will move by 50px.

If you go through the code carefully, you won’t find it difficult at all.

So, that’s all folks! Now you are free to do some tweaking in the background color, transparency, fade in delay, shadows, image width, etc. and make this image gallery exactly as per your need. And if you wish to take your visitor to some page after clicking the image, you just need to define the hyperlink for each of them.

Tagged on: , ,

One thought on “Simple Image Slider with jQuery and CSS3

Leave a Reply