How to Create an Image Slider using jQuery and CSS3

How to Create an Image Slider using jQuery and CSS3 [Tutorial]

Topic: CSS3 & jQuery
Difficulty: Intermediate
Estimated Completion Time: 30 mins

In this tutorial we will create a Slider with “Nivo Slider jQuery Script” and CSS3. We will use the “Nivo Slider jQuery Script” because it’s a powerful tool and it’s free. This script has 16 transition effects, it’s simple, flexible and have a lot of more nice features. You can use it almost anywhere and for almost any kind of project, including personal and commercial websites and themes you make. In this tutorial we will code the Image Slider that you can find in Futurico UI Pro made by Vladimir Kudinov.

Step 1 – Basic HTML Markup

First you need to download the Nivo Slider jQuery version here. You only need two files from the pack you have downloaded: “nivo-slider.css” and “jquery.nivo.slider.pack.js”.

Then create the basic HTML Markup and add the “Nivo Slider” CSS and JS files. You also need to link to the jQuery library using the last version hosted by Google or if you want you can host it on your own server, it’s your choice.

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Slider Tutorial</title>
	<link rel="stylesheet" href="css/nivo-slider.css" media="screen">
</head>

<body>

<!-- jQuery & Nivo Slider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>

</body>
</html>
To load the nivo slider we need to add some more lines of code before the </body> closing tag. We also need to set some options to make the controls visible, change the caption opacity and changed the previous and next slide text to arrows. You can find the full options list here.

<script>
	$(window).load(function() {
		$('#slider').nivoSlider({
			directionNavHide: false,
			captionOpacity: 1,
			prevText: '<',
			nextText: '>'
		});
	});
</script>

To load the nivo slider we need to add some more lines of code before the </body> closing tag. We also need to set some options to make the controls visible, change the caption opacity and changed the previous and next slide text to arrows. You can find the full options list here.

<script>
	$(window).load(function() {
		$('#slider').nivoSlider({
			directionNavHide: false,
			captionOpacity: 1,
			prevText: '<',
			nextText: '>'
		});
	});
</script>

Step 2 – Slider HTML Markup

Firs we need to create a div with the class “slider-wrapper” and “futurico-theme”. Then create a div with id “slider” and the class “nivoSlider”. For each slide we will create a <img>.

<div class="slider-wrapper futurico-theme">

	<div id="slider" class="nivoSlider">

		<img src="img/slide1.png" alt="">

		<img src="img/slide2.png" alt="">

		<img src="img/slide3.png" alt="">

		<img src="img/slide4.png" alt="">

	</div>

</div>

Step 3 – Slider Layout

We will create a 300px width and 180px height slider. As we will add 5px padding we need to subtract 10px from the width and from the height. We will also set the background color and the rounded corners.

.futurico-theme.slider-wrapper {
	position: relative;
	width: 290px;
	height: 170px;
	margin: 0;
	padding: 5px;

	background: #141517;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.futurico-theme .nivoSlider {
	position: relative;
	width: 290px;
	height: 170px;
}

.futurico-theme .nivoSlider img {
	display: none;
	position: absolute;
	width: 290px;
	height: 170px;
	top: 0;
	left: 0;
}

Step 4 – Slider Controls

Now we will style the slider controls. We will start by positioning the controls at the bottom and centering them. If you will have more than four slides you will have to change the “left” value in order to center the controls.

.futurico-theme .nivo-controlNav {
	position: absolute;
	bottom: -30px;
	left: 105px;
}

We will create a circle for each slide. To style it we’ll add a background color, some shadows and rounded corners to make the circle. To hide the “1,2,3,4” numeration we will add a text indent with a negative value.

.futurico-theme .nivo-controlNav a {
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	margin-right: 5px;
	text-indent: -9999px;

	background: #141517;

	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
	box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
}

For the active slide we’ll add a green gradient and change the shadows.

.futurico-theme .nivo-controlNav a.active,
.futurico-theme .nivo-caption span {
	background: #a5cd4e;
	background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);

	-webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
	-moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
	box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
}

Step 5 – Next and Previous Slide

To style the next and previous slide controls we will position it at the center and add some basic CSS styles (font-family, font-size, color, etc.).

.futurico-theme .nivo-directionNav a {
	display: block;
	top: 60px;

	font-family: 'Consolas', sans-serif;
	font-size: 40px;
	color: #141517;
	text-shadow: 0px 1px 1px rgba(255,255,255, .05);
}

.futurico-theme a.nivo-prevNav { left: -40px; }

.futurico-theme a.nivo-nextNav { right: -40px; }

Step 6 – Captions HTML Markup

To create the captions we need to create a div with a class “nivo-html-caption” and a random id. To link the caption to the respective slide add a “title” to the <img> with the same name as the caption id.

<div id="slider" class="nivoSlider">

	<img src="img/slide1.png" alt="" title="#caption1">

	<img src="img/slide2.png" alt="">

	<img src="img/slide3.png" alt="" title="#caption3">

	<img src="img/slide4.png" alt="">

</div>

<div id="caption1" class="nivo-html-caption">
	<strong>New Project</strong> <span></span> <em>Some description here</em>.
</div>

<div id="caption3" class="nivo-html-caption">
	<strong>Image 3</strong> <span></span> <em>Some description here</em>.
</div>

Step 7 – Caption Style

To style the captions we will change the text color the font family and font size. We will also use the same green gradient that we have used before.

.futurico-theme .nivo-caption {
	padding: 5px 0;

	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #e1e1e1;

	background: #000000;

	-webkit-border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
}

.futurico-theme .nivo-caption span {
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 5px 1px 5px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.futurico-theme .nivo-caption em {
	font-family: Georgia, sans-serif;
	font-size: 11px;
	color: #727581;
}

Conclusion

That’s it! We have created a powerful and beautiful slider. In this tutorial we focused on the styling of the slider and the “Nivo Slider Script” tacked care of the functionality. Don’t forget to leave some feedback in the comments and subscribe us.

Preview

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

Futurico PRO

Valeriu is a Web Designer & Front-End Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on @vtimbuc, Google+ or visit his web site at vtimbuc.net.

Newsletter

58 Comments
  1. Imran Ali Mar 20, 5:11 pm

    Thanks a lot, i was in search of these slider.I was about to search for this adn your facebook update saved today…

    Reply
    +3
  2. Ricky Mar 21, 3:12 pm

    Many thanks, great timing and very helpful.

    Reply
    +2
  3. wptidbits Mar 27, 6:09 am

    Thanks. Extensive explanation of this tutorial. Is there any way to make it responsive? I’m looking for DIY responsive image jquery slider with CSS3.

    Reply
    0
    • Valeriu Mar 27, 3:21 pm

      Yes, you can make it responsive by using @media queries and set a custom CSS for each resolution you want.

      Reply
      0
  4. Sergio Apr 3, 6:49 pm

    Hi,
    Great tutorial! Very very useful.. You’ve helped me save my time…
    Is there any way to make it degrade gracefully with JS turned off, as a css-only slider, similar to http://wowslider.com/ or ? I tried to run your demo w/o JS and a black block appears only..

    Reply
    0
    • Valeriu Apr 3, 7:02 pm

      You can make it work with only css, but you will have to do it yourself.

      Reply
      0
  5. akash Apr 5, 12:37 pm

    How do I add Next Prev Image in place of text for NEXT PREVIOUS (directionNav ) navigation ?

    Reply
    0
    • Valeriu Apr 5, 3:09 pm

      With css, first hide the text (text-indent: -9999px;) ten add a background image to the next and prev.

      Reply
      +2
  6. akash Apr 6, 11:07 am

    thanks for the reply. As I am pretty new in this, maybe I am making some basic errors. This is what I did. This hides the text nav , but can’t seem to get the images. The png files are in the images folder. Please suggest. This is the code I tried

    .futurico-theme .nivo-directionNav a {
    display: block;
    top: 50px;

    font-family: ‘Consolas’, sans-serif;
    font-size: 40px;
    color: #141517;
    text-shadow: 0px 1px 1px rgba(255,255,255, .05);
    text-indent: -9999px; /* added to hide the text based NAV */
    }

    .futurico-theme a.nivo-prevNav {
    left: -40px;
    background: url(images/prev.png);
    background-repeat:no-repeat;
    z-index: 100; }

    .futurico-theme a.nivo-nextNav {
    right: -40px;
    background: url(images/next.png);
    background-repeat:no-repeat;
    z-index: 100;
    }

    Reply
    0
    • Valeriu Apr 6, 5:10 pm

      Try to add a width and height:

      .futurico-theme .nivo-directionNav a {
      display: block;
      top: 50px;
      text-indent: -9999px; /* added to hide the text based NAV */
      }

      .futurico-theme a.nivo-prevNav {
      left: -40px;
      background: url(images/prev.png);
      background-repeat:no-repeat;
      z-index: 100;
      width: 50px; /*image width*/
      height: 50px; /*image height*/
      }

      .futurico-theme a.nivo-nextNav {
      right: -40px;
      background: url(images/next.png) no-repeat;
      z-index: 100;
      width: 50px; /*image width*/
      height: 50px; /*image height*/
      }

      Reply
      +3
  7. Andrew Apr 8, 12:23 am

    Definitely an interesting modification to the Nivo Slider. Thanks for your hard work.

    Reply
    0
  8. Adam Apr 10, 7:51 pm

    Great tut. Thanks for it.

    Now, is there a way to make it responsive/resizable?

    Also, and this is driving me NUTS, I’m working on a site that contain multiple galleries. I’m using jQuery’s fadeIn/fadeOut to replace the viewable galleries. SOOO many of the responsive sliders (or most any slider) I’ve tried breaks when applying the fade. So, do you know if this will work with it?

    In any event, thanks again for peeling back the mystery of creating sliders.

    Reply
    0
  9. akash Apr 12, 9:42 am

    Sorry for replying a bit late. Thanks for the hint. It is working fine now. Great tutorial.
    If I am being too pushy, just one last modification if possible. Can we hide the image buttons (Next.png and Prev.png) once the last slide or the first slide is reached as the case maybe. I am sure it would help others who are following this tut.

    Reply
    0
    • Valeriu Apr 12, 10:03 am

      You can hide the directions by setting this option to true: directionNavHide: true.
      For more options take a look at the nivo slider documentation.

      Reply
      0
  10. Drjay Apr 21, 4:17 am

    Hello,

    I used your code to as a base to create a slider but when I deploy it to my MAMP folder, it doesn’t work. The The two arrows are all over place and whole thing is acting up. When I open it with safari, it works fine. Any idea why?

    Other than that, its good work! I learnt!

    Drjay

    Reply
    +1
  11. Andrew Apr 26, 12:54 am

    Awesome slider but I get stuck on what to do for Step 3. Do I just drop that code in with nivo-slider.css or make a new css rule?

    Reply
    0
  12. Samad Aslam Khan Apr 26, 5:46 pm

    Wow… Very Simple in look but very complex in coding. Well I saved it and I’m ready to use it. Thanks for sharing…

    Reply
    0
  13. Mia May 1, 10:49 pm

    This is great! I got it work on my website. I am trying to slow down the slide intervals to 10 seconds per slide. I have changed some values in js file, but with no success. Where is this functionality?

    Reply
    0
    • Valeriu May 16, 2:30 pm

      Add this option: pauseTime: 3000, // How long each slide will show

      Reply
      0
      • Faye Jan 25, 6:44 pm

        Where should I add this code:”pauseTime: 3000, // How long each slide will show”?

        Reply
        0
  14. Ahmed May 4, 10:35 pm

    Thank you so much for putting this up, been struggling for over 6 hours to customize the nivo slider on a site and I finally managed to do it with your help.

    Thank you!
    Shukran!

    Reply
    0
  15. Caroline May 7, 11:28 pm

    Thank you for the great tutorial! I was wanting to be able to link the images and/or the captions to pages on my site, but am having trouble. Any hints or secrets to make it work?

    Reply
    0
    • Valeriu May 16, 2:29 pm

      Wrap the images with a anchor tag, you may hyave to add some styles like, display: block ; width and height.

      Reply
      0
  16. Johnny May 8, 7:19 pm

    Thank you for cool slider :) How do i make the SliderControl into a image thumbnail? Which mean the banner itself.

    Reply
    0
    • Valeriu May 16, 2:31 pm

      Use this options and add the respective css styles:
      controlNavThumbs: false, // Use thumbnails for Control Nav
      controlNavThumbsFromRel: false, // Use image rel for thumbs
      controlNavThumbsSearch: ‘.jpg’, // Replace this with…
      controlNavThumbsReplace: ‘_thumb.jpg’, // …this in thumb Image src

      Reply
      0
  17. Niklas Jun 6, 4:13 pm

    Hi Valeriu,

    can i use this slider for a commercial website ?

    Yours sincerely,
    Niklas

    Reply
    0
  18. saf Jun 14, 11:21 am

    I want to remove those small green dots below the slider, how to do that in nivo?

    Reply
    0
  19. Fredrick Sawyer Jun 20, 11:20 pm

    i added this option: pauseTime: 3000 but the slides stil changes at the same rate. What am I doing wrong?

    Reply
    0
  20. Micke Jun 27, 4:17 pm

    Thank you for the nice tutorial! I´m newbie in CSS3 and jquery.. Help me very much to understand how to do…

    Reply
    0
  21. Rakesh Bhatia Jun 28, 1:57 pm

    Awesome tutorial for slider!!!! after reviewed this tutorial i know more about Jquery slider I will defiantly recommend this tutorial to my friends. Thank you for sharing us

    Reply
    0
  22. Zaraq Jun 28, 4:08 pm

    Hi,
    instead of the green buttons i want boxes of 100px x 100px….That i have understood how to do.
    but i want to write text in those boxes too. How to do that?

    Reply
    -1
  23. gakker Jul 18, 8:08 pm

    hello i must say rly nice work. just wanted to ask one question is there a call or an attribute that i could set and instead of showing one image at atime it can show lets say “5″ ??

    Reply
    +1
  24. Alexandre Jul 29, 6:33 pm

    Boa tarde,
    Sou um novato nestas coisas, e tentei fazer o código que tem acima através do frontpage. Tou com alguns problemas no passo 4. Será que podia disponibilizar o código futurico-theme.css para ver se apanhava a partir daí?
    Cumprimentos e desde já muito obrigado,

    Reply
    0
  25. Maheswari.P Aug 17, 9:33 am

    where is the js/jquery.nivo.slider.pack.js file here? Is it specified in this page?

    Reply
    0
  26. br Sep 22, 4:20 am

    This is definitely the easiest tutorial about jQuery slide I’ve seen, thank you.

    Reply
    0
  27. Calvin Oct 25, 12:27 am

    Will this tutorial work with jQuery 1.8.2 or does it only function with jQuery 1.7.1?

    Reply
    0
  28. Faye Jan 25, 6:46 pm

    Hi
    I made this slide clickable. However, when I add the url link to the first slide, the first slide will disappear. Other slides have no problem to add url link.
    Is there anyway to solve this problem?

    Thanks!

    Reply
    0
  29. Rio Feb 28, 6:48 am

    How do you clear the auto-slide function should I do?

    I want to make a slide function only when you press both buttons.

    Reply
    0
  30. EagleStorm Mar 9, 6:41 pm

    Hi,
    you have the best & easiest tutorial I’ve seen, been looking for one like this since a long time, pretty thankful, great work.
    By the way I have two questions, I’m pretty a bigger and I don’t know much about j query, anyhow, I replaced the navigation arrows with pictures and it works fine thx to you, is there a way to add a function to make them in a hide mode while to appear when hovering?
    Second question is there a way to add css box-shadow on the slideshow? I have the code for it but I’m not sure how to put it, do I need a specific j query function to relate to the css code to make it work?
    Thanks

    Reply
    +3
  31. Mike Apr 1, 4:19 am

    Thanks for the tutorial.

    But I already get stuck at step 1; when I paste the script code into my index.php, my site can not be loaded anymore.

    Trying to set up nivo 3.2 with jquery 1.9.1.

    Any suggestions welcome :)

    Reply
    0
  32. Jo Apr 22, 3:44 am

    Wooow Its working fine….Thanks for your valuable time to share this. God Bless you. My Doubt: how can i position this slider to right side or anywhere on the page?

    Reply
    0
  33. moataz samy May 1, 4:43 pm

    very good work for a jquery slider

    Reply
    0
  34. Seb May 31, 9:30 pm

    Great guide! Thanks a lot, helped me give my blog the special touch haha! :)

    Reply
    0
  35. Amul Jun 11, 9:42 pm

    Hi, How can I change the sliding effects while changing from one slider to other.. I see it has a boxes effect.. how can I change it to smooth fading. Please suggest.

    Reply
    0
  36. Nich Jun 27, 12:33 pm

    Thanks for the step-by-step tutorials.

    I take your styling options to custom jQuery UI Slider, and it works.

    Much appreciated.

    Reply
    0
  37. nice Aug 1, 5:23 pm

    Thank you for the nice tutorial! I´m newbie in CSS3 and jquery.. Help me very much

    Reply
    0
  38. Sylvan Aug 6, 4:28 pm

    Hi,

    perhaps I’m the one who’s doing something wrong, but I’ve tried running this code on several browsers and I keep getting the same error.

    On IE:
    JavaScript runtime error: Object doesn’t support property or method ‘nivoSlider’

    On Chrome:
    Uncaught TypeError: Object [object Object] has no method ‘nivoSlider’

    And my initial code is:

    // Options to make the controls visible
    $(window).load(function () {
    $(‘#slider’).nivoSlider({
    directionNavHide: false,
    captionOpacity: 1,
    prevText: ”
    });
    });

    Any idea what could be the problem?

    Thanks

    Reply
    0
  39. USAMA Aug 6, 9:34 pm

    thanks it worked

    Reply
    0
  40. Leigh Aug 13, 6:45 pm

    Hi
    Great tutorial and Image Slider. Is it possible to add pause and play buttons to the slideshow? Many thanks.

    Reply
    0
  41. Pankaj Sep 17, 2:54 pm

    Sir great tutorial!!!!
    But when I apply this jquery for my project display will black no image show on my slide…..why this how to resolve this problem please help me

    Reply
    0
  42. Collette Nov 12, 12:57 pm

    Great slider but I am having trouble getting it to appear the right size on my website. I’m new to this so I’m not sure if I need to add something to the html/css files on my website to get the slider to appear the correct width – its currently appearing about a third of the page width which is about 950px – any ideas how I can make it wider?

    Reply
    0
  43. Jim Feb 14, 5:02 am

    Hello – Great work, thank you. Is there a way instead of showing one image at a time it can show 4 ??

    Reply
    0
  44. Paula Borowska Mar 31, 11:25 pm

    Dudes, the code for this is effed up!! :(

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters