How to Make Custom Designs for your jQuery Slider

Posted in Coding, HTML & CSS, JS & AJAX, Tutorials • Posted on 15 Comments

Sliders are a common component used in website design and for various purposes. We can create image, content, or video sliders using  jQuery. jQuery is the most popular JavaScript framework used for these sliders. A lot of jQuery sliders can be categorized based on the techniques used for sliding. The following are some common and trending techniques used by developers.

  • Layered Sliders – This is the latest addition to sliders with parallax effect.
  • Fade In/Out Sliders – These types of sliders do not have controls. Content just fades away one by one.
  • Banner Rotators – These sliders rotate in a circular path.

There are many other types of techniques as well. Each type of slider is suited for a different purpose and location on your website. Hence the designer has to carefully choose sliders for different locations.

Even on our personal sites we create sliders with large dimensions to show products, sliders for displaying our project portfolio and small sliders to display featured or popular posts on a blog. So there is every chance that we might include more than one slider in a website. In the next section I’ll explain why multiple sliders can be a real pain for a designer or developer.

Zip File Download

Disadvantages of Using Multiple jQuery Sliders

As I mentioned earlier, different sliders provides different effects and different layouts. Web designers will be prompted to include the slider with best effects for different locations. There are many drawbacks to using multiple different sliders on a single web page.

  • Each slider will have a set of script and CSS files. Increasing the number of scripts and CSS files will slow your site loading time, which will affect SEO.
  • Different sliders may require different versions of jQuery. Hence jQuery files will be duplicated.
  • It’s possible to have conflicts in codes with other sliders.

Considering the above points, it’s better to use one slider throughout your website. It’s possible to create different designs and features using the same slider. All you have to do is pick a flexible slider and have some knowledge of jQuery and CSS to customize it. I’ll be using Rhino Slider throughout this tutorial since it is one of the most flexible sliders available.

Introduction to Rhino Slider

Rhino Slider is a jQuery Slider dual licensed under the MIT or GPL Version 2 licenses. You can download and get more information here. Following image shows the default view of Rhino Slider.

Rhino Slider Default View

I have explained the Rhino Slider components and how it can be used in my tutorial How to Create a Multi-Step Form Using RhinoSlider. You can use it to get a better understanding about how it works. In this tutorial I’ll be explaining how to create different layouts and different functionality with a single slider.

Designing Custom Navigation for the Slider

Navigation is one important part of a slider. Even though sliders can be created to slide automatically in specified intervals, its preferable to provide controls for the user to go through them at their own speed. Generally Next and Previous buttons are provided in most sliders. Rhino Slider, which I am using for this tutorial, contains a numbered navigation similar to pagination.

We can create different designs for navigation pretty quickly and make the slider look completely different. I’ll show you how to change the basic styles of navigation. So lets get started.

Identifying Control Buttons

There are 3 navigation buttons in Rhino Slider for Previous Slide, Next Slide and Pagination. These components are provided with specific CSS classes so that we can identify them easily.

Previous Slide – rhino-prev
Next Slide – rhino-next
Pagination – rhino-bullets

Now, have a quick look at the image below to get an idea about how we are going to change the design.

Custom Navigation for Slider

Demo


Step 1 – Designing Prev/Next Controls

As you can see, prev and next buttons are given different images to the original one with black background. Also, positioning of the controls has been changed to show them in the middle instead of bottom. So let’s discuss the necessary changes to main CSS file.

.rhino-btn {
	background:url(../img/rhinoslider-sprite.png) 0 0 no-repeat;
	z-index:10;
	display:block;
	text-indent:-999%;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;

        /* Modified Styles */
	width:30px;
	height:25px;
}

.rhino-prev, .rhino-next {/* Modified Styles */ bottom:150px; }

.rhino-prev {
         /* Modified Styles */
	 background: url("../img/prev-arrow.png") no-repeat scroll 13px 10px #000000;
         padding: 10px 5px;
         left : -45px;
}

.rhino-next {
        /* Modified Styles */
	background: url("../img/next-arrow.png") no-repeat scroll 15px 10px #000000;
        padding: 10px 5px;
        right:-45px;
}

.rhino-prev:hover { /* Modified Styles */}

.rhino-next:hover { /* Modified Styles */}
.rhino-bullets:before, .rhino-bullets:after {
	position:absolute;
	display:block;
	left:-16px;
	content:' ';
	width:16px;
	height:26px;
	/* Removed Style */
        /* background:url(../img/rhinoslider-sprite.png) -224px 0 no-repeat; */
}
.rhino-bullets {
	position: absolute;
	bottom: -3px;
	margin:0 0 0 -50px;
	z-index: 10;
	background: #fff;
	padding:0;
        /* Modified Styles */
        left: 45%;
}
.rhino-bullets li {
	float:left;
	display:inline;
	/* Modified Styles */
	padding:10px;
	background :#000;
	/*margin:0 2px;*/
}
.rhino-bullets li a.rhino-bullet {
	display: block;
	width: 16px;
	cursor: pointer;
	background: white;
	font-size: 10px;
	text-align: center;
	padding: 6px 0 5px 0;
	color: #333;
	text-decoration:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
        /* Modified Styles */
	background:url("../img/pagination.png") repeat scroll 0 0 #0C1C28;
        height: 3px;
}

.rhino-bullets li a.rhino-bullet:hover, .rhino-bullets li a.rhino-bullet:focus {
	color:#999;
	/* Removed Style */
        /* background:#eee; */
}

.rhino-bullets li a.rhino-bullet.rhino-active-bullet {
	color:#fff;
	/* Removed Style */
        /* background:#5cd4e8;  */
        /* Modified Style */
	background-position:0px -14px;
}

Once you apply these styles, the slider will change its look to the design provided in the image. I have mentioned the styles which have been changed to achieve the new design. Now you can see how easy it is to create new designs.

Designing Preview Images for Slider

In the previous section, I explained how to use navigation controls and customize the layout. In this section we’ll try a bit of more advanced code to show preview images of the slider in place of navigation numbers. We will be using a combination of CSS and jQuery for this section.

Demo

So we have to remove the circular image used for pagination and increase the dimensions of navigation bullets to show the preview image. Let’s take a look at the CSS code first. All the changes from the original CSS file can be found in code comments.

.rhino-bullets {
	position: absolute;
	bottom: -3px;
	z-index: 10;
	background: #fff;
	padding:0;
        /* Modified Styles */
        bottom: -70px;

        /* Removed Styles
           left: 45%;
	   margin: 0 0 0 -50px;
        */

}

.rhino-bullets li {
	float:left;
	display:inline;
	/* Modified Styles */
	padding:1px;
	background :#000;
	/*margin:0 2px;*/
}
.rhino-bullets li a.rhino-bullet {
	display: block;
	cursor: pointer;
	background: white;
	font-size: 10px;
	text-align: center;
	padding: 6px 0 5px 0;
	color: #333;
	text-decoration:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;

        /* Modified Styles 	*/
        height: 55px;
        width: 102px;
        padding: 0;
        border:5px solid #eee;

        /*  Removed Styles
		background:url("../img/pagination.png") repeat scroll 0 0 #0C1C28;
         */

}
img{
max-width:100%;
}

Once you apply the above CSS code the preview will look like the following.

Slider Before Preview Images

Let’s play with some jQuery code to generate the preview images in place of numbers in bullets.

$('#slider li').each(function(){
	var image_src = $(this).find("img").attr("src");
	var panel_id = $(this).attr("id");

	$('.rhino-bullets li').find("#"+panel_id+"-bullet").html("<img src='"+image_src+"' />");
});
  • First we traverse through all the li elements inside slider using jQuery each function.
  • You may have noted that li elements for slider images have the ID as rhino-item0,rhino-item1 etc., and the respective pagination bullet as rhino-item0-bullet, rhino-item1-bullet.
  • So we get the image src using the src attribute and get the ID of li elements above the image.
  • Then we find the respective bullet not using the ID and assign the image to the preview section.

Now you will be able to see the preview images as shown in the screen below.

Slider After Preview Images

You can see how easy it is to change the designs and functions. Previewing images like this is not the most optimized way since it scales images. But its very useful in certain situations.

Slider with Vertical Tabs

Lets see how we can convert the default slider into a slider with tabbed navigation on the left side. You can take a look at the final output of this section using the following screen.

Slider with Tabs

Demo

The following is the necessary changes you need to make to the default CSS file in order to customize the design.

.rhino-bullets {
    background: none repeat scroll 0 0 #FFFFFF;
    left: -136px;
    margin: 0 0 0 -50px;
    padding: 0;
    position: absolute;
    z-index: 10;

    /* Removed Styles
    bottom: -3px; */

    /* Added Styles */
    top: -3px;
    border:1px solid #A7A5A5;

}

.rhino-bullets:before, .rhino-bullets:after {
    position:absolute;
    display:block;
    left:-16px;
    content:' ';
    width:16px;
    height:26px;

    /* Removed Styles
    background:url(../img/rhinoslider-sprite.png) -224px 0 no-repeat;
    */
}
.rhino-bullets li {
    margin: 0 2px;

    /* Modified Styles */
    display: block;
    border-bottom: 1px solid #eee;

    /* Removed Styles
    float: left;*/
}

.rhino-bullets li a.rhino-bullet {
    -moz-user-select: none;
    background: none repeat scroll 0 0 white;
    color: #333333;
    cursor: pointer;
    display: block;
    font-size: 10px;

    text-align: center;
    text-decoration: none;

    /* Modified Styles */
    height: 50px;
    padding: 5px;
    width: 170px;

}
.rhino-bullets li img{
    width:75px;
    height: 50px;
    float: left;
}

.rhino-bullets li p{
    font-family: helvetica;
    font-size: 12px;
    font-weight: bold;
}

Apart from the thumbnail images we can also add a short title or caption in front of the header. You have to define the captions in a JavaScript array as shown in the code below.

var info = ["Image Tagging","Rhino Slider","Tweet Book","Reward Tweet","Sliding Menu"];

                $('#slider li').each(function(index){
                    var image_src = $(this).find("img").attr("src");
                    var panel_id = $(this).attr("id");

                $('.rhino-bullets li').find("#"+panel_id+"-bullet").html("<img src='"+image_src+"' /><p>"+info[index]+"</p>");
});

I have added the caption using the JavaScript array while traversing through pagination bullets.

How to Use the Designs in Single Page

In the previous 3 sections I showed you how to create different designs and functionality using the same slider. We changed the main CSS file of the Rhino Slider, but when we use more than one slider inside a single page we cannot change style the way we just did. So we have to find alternative methods to specify different styles for same classes and elements.

Demo

First we have to provide different IDs for slider containers as shown below and initialize the Rhino Slider separately.

<ul id="slider1" class="slider">
                <li><img src="img/slider/1.jpg" alt="" /></li>
                <li><img src="img/slider/2.jpg" alt="" /></li>
                <li><img src="img/slider/3.jpg" alt="" /></li>
                <li><img src="img/slider/4.jpg" alt="" /></li>
                <li><img src="img/slider/5.jpg" alt="" /></li>
            </ul>

            <ul id="slider2" class="slider">

                <li><img src="img/slider/4.jpg" alt="" /></li>
                <li><img src="img/slider/5.jpg" alt="" /></li>
                <li><img src="img/slider/1.jpg" alt="" /></li>
                <li><img src="img/slider/2.jpg" alt="" /></li>
                <li><img src="img/slider/3.jpg" alt="" /></li>
            </ul>

Then we have to assign a unique class to the bullet navigation list of each slider container. The following jQuery code will add the class to the navigation bullets.

$('#slider1').parent().addClass("slider1");
$('#slider2').parent().addClass("slider2");

Each design will have its own styles for each class. So prefix all the modified styles with the class relative to the slider. Consider the following example.

.slider1 .rhino-bullets {
	position: absolute;
	bottom: -3px;
	z-index: 10;
	background: #fff;
	padding:0;
        /* Modified Styles */
        bottom: -70px;

        /* Removed Styles
           left: 45%;
	   margin: 0 0 0 -50px;
        */
}
.slider2 .rhino-bullets {
	position: absolute;
	bottom: -3px;
	margin:0 0 0 -50px;
	z-index: 10;
	background: #fff;
	padding:0;
        /* Modified Styles */
        left: 45%;
}

In the above example 2 sliders have different styles for the rhino-bullets class. So prefix it with your slider class. Follow the same process for every other styles which is not common to all sliders.

So we have created a few slider designs and learned how to customize a slider. It’s time for you to create your own customized design for the slider. All are welcome to share links or images to your customized version of Rhino Slider.

22 Written ArticlesWebsiteGoogle+

Rakhitha Nimesh is a software engineer and writer from Sri Lanka. He likes to develop applications and write on latest technologies. He is available for freelance writing and WordPress development. You can read his latest book on WordPress Web Application Development. He is a regular contributor to 1stWebDesigner, Tuts+ network and Sitepoint network. Make sure to contact him at www.innovativephp.com or follow him on Twitter and Google+

15 Comments Best Comments First
  • Vipul Anand

    Monday, October 29th, 2012 23:35

    6

    “They say mobile first”
    no doubt Rihno is my personal fav too. Touch library in content sliders adds to the UI on board.
    one such useful free, responsive, touch enabled and full screen Jquery content slider is HERE CALLED “REVEAL” take a look! try your new deck of slides

    +1
  • Tarek

    Tuesday, October 30th, 2012 10:28

    7

    Personally, I’d rather start with something more barebones and simple. I still use a piece of carousel/slideshow code that was shared on NetTuts several years ago. It allows tremendous customization and (IMHO) makes more sense than some of the Rhino stuff I see here (e.g., captions/titles via a javascript array?! Really?).

    See http://net.tutsplus.com/tutorials/javascript-ajax/building-an-auto-scrolling-slideshow-that-works-with-and-without-javascript/.

    If you’re creative with your HTML markup and your CSS, you can can accomplish almost anything building off of this base code.

    0
  • Srinivas Reddy

    Monday, October 29th, 2012 10:01

    1

    Nice tutorial. Thanks a lot for sharing with us.

    0
  • Jay

    Monday, October 29th, 2012 11:51

    2

    That’s not a slider, this is a slider http://jqueryui.com/slider/

    0
    • Rakhitha Nimesh

      Monday, October 29th, 2012 19:50

      5

      Hi Jay

      I understand that what you have provided is a slider as well. But generally we call these slideshows as jQuery sliders.

      0
  • Casey

    Monday, October 29th, 2012 12:16

    3

    Thanks Rakhitha, I really enjoyed the quality of the this article. jQuery sliders are amazing and can add to the user experience. Do you know of any responsive sliders on the market, or for free?

    Cheers!

    0
  • Tim

    Thursday, November 1st, 2012 11:39

    8

    Your “Bac to Tutorial” link on the demo page gives a 404 link to

    0
  • Showrav Hauqe

    Thursday, November 8th, 2012 05:42

    9

    I will must try this awsome tutorial. Nice share mate.

    0
  • zavera

    Sunday, December 30th, 2012 01:39

    14

    Great step by step instructions to create custom jquery slider, must see how it works in responsive design, Thanks for quality content!

    0
    • Rakhitha Nimesh

      Sunday, December 30th, 2012 18:46

      15

      Hello Zavera

      For the purpose of this tutorial I havent made it responsive. Maybe you can try if you are familier with web design.

      Let me know anything that I can help you with.

      Thank you very much.

      0
  • Dave Keen

    Monday, December 10th, 2012 05:00

    12

    Great article, jQuery sliders add a real professional feel to a website. Are web designers excepting that JQuery works on most modern mobile phone platforms?

    Many thanks

    Dave

    0
    • Rakhitha Nimesh

      Thursday, December 13th, 2012 00:52

      13

      Hello Dave

      Thanks for sharing with us. What is your favorite jQuery Slider ?

      0
  • Solutis

    Wednesday, November 14th, 2012 03:09

    10

    Hello,
    Thank you for this post. I use Jquery on Joomla and it’s a good opportunity to custom this.

    0
  • tuhin

    Monday, November 19th, 2012 03:52

    11

    really thanks for your post.this post helps me to teach it.

    0
  • zavera

    Sunday, December 30th, 2012 01:39

    14

    Great step by step instructions to create custom jquery slider, must see how it works in responsive design, Thanks for quality content!

    0
    • Rakhitha Nimesh

      Sunday, December 30th, 2012 18:46

      15

      Hello Zavera

      For the purpose of this tutorial I havent made it responsive. Maybe you can try if you are familier with web design.

      Let me know anything that I can help you with.

      Thank you very much.

      0
  • Dave Keen

    Monday, December 10th, 2012 05:00

    12

    Great article, jQuery sliders add a real professional feel to a website. Are web designers excepting that JQuery works on most modern mobile phone platforms?

    Many thanks

    Dave

    0
    • Rakhitha Nimesh

      Thursday, December 13th, 2012 00:52

      13

      Hello Dave

      Thanks for sharing with us. What is your favorite jQuery Slider ?

      0
  • tuhin

    Monday, November 19th, 2012 03:52

    11

    really thanks for your post.this post helps me to teach it.

    0
  • Solutis

    Wednesday, November 14th, 2012 03:09

    10

    Hello,
    Thank you for this post. I use Jquery on Joomla and it’s a good opportunity to custom this.

    0
  • Showrav Hauqe

    Thursday, November 8th, 2012 05:42

    9

    I will must try this awsome tutorial. Nice share mate.

    0
  • Tim

    Thursday, November 1st, 2012 11:39

    8

    Your “Bac to Tutorial” link on the demo page gives a 404 link to

    0
  • Tarek

    Tuesday, October 30th, 2012 10:28

    7

    Personally, I’d rather start with something more barebones and simple. I still use a piece of carousel/slideshow code that was shared on NetTuts several years ago. It allows tremendous customization and (IMHO) makes more sense than some of the Rhino stuff I see here (e.g., captions/titles via a javascript array?! Really?).

    See http://net.tutsplus.com/tutorials/javascript-ajax/building-an-auto-scrolling-slideshow-that-works-with-and-without-javascript/.

    If you’re creative with your HTML markup and your CSS, you can can accomplish almost anything building off of this base code.

    0
  • Vipul Anand

    Monday, October 29th, 2012 23:35

    6

    “They say mobile first”
    no doubt Rihno is my personal fav too. Touch library in content sliders adds to the UI on board.
    one such useful free, responsive, touch enabled and full screen Jquery content slider is HERE CALLED “REVEAL” take a look! try your new deck of slides

    +1
  • Casey

    Monday, October 29th, 2012 12:16

    3

    Thanks Rakhitha, I really enjoyed the quality of the this article. jQuery sliders are amazing and can add to the user experience. Do you know of any responsive sliders on the market, or for free?

    Cheers!

    0
  • Jay

    Monday, October 29th, 2012 11:51

    2

    That’s not a slider, this is a slider http://jqueryui.com/slider/

    0
    • Rakhitha Nimesh

      Monday, October 29th, 2012 19:50

      5

      Hi Jay

      I understand that what you have provided is a slider as well. But generally we call these slideshows as jQuery sliders.

      0
  • Srinivas Reddy

    Monday, October 29th, 2012 10:01

    1

    Nice tutorial. Thanks a lot for sharing with us.

    0

Comments are closed.

54.83.172.112 - unknown - unknown - US