How to Create a Responsive Image Slider in jQuery and CSS3

Responsive Image Slider in jQuery and CSS3

Topic: jQuery (flexslider) / CSS3
Difficulty: Intermediate
Estimated Completion Time: 30 mins

Today we will code a responsive image slider from the Impressionist UI. We will code it using the FlexSlider plugin for the functionality and style it using CSS3. I hope you will enjoy it and find it useful for your projects. Lets get started!

STEP 1 – Markup

The slider html markup is very simple. We’ll create a <div> with the class “flex-container”, then inside of this <div> we will add another one with the class “flex-slider”, in this div will be placed all the slider controls. To finish we will create an unordered list to add all the slides. Each slide needs to be inside of a list element.

<div class="flex-container">
	<div class="flexslider">
		<ul class="slides">
			<li>
				<a href="#"><img src="img/slide1.jpg" /></a>
			</li>

			<li>
				<img src="img/slide2.jpg" />
			</li>

			<li>
				<img src="img/slide3.jpg" />
				<p>Designing The Well-Tempered Web</p>
			</li>
		</ul>
	</div>
</div>

Next we’ll include the jQuery library and the FlexSlider plugin. To load the slider include the following code, you can set the settings there too, for more setting visit the plugin website.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script>
	$(document).ready(function () {
		$('.flexslider').flexslider({
			animation: 'fade',
			controlsContainer: '.flexslider'
		});
	});
</script>

STEP 2 – Basic Styles

First we will add some reset styles to clear all the margins, paddings, etc. and keep consistency trough all browsers.

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  { outline: none; }

.slides,
.flex-control-nav,
.flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.flexslider a img { outline: none; border: none; }

.flexslider {
	margin: 0;
	padding: 0;
}

Then we will hide the slides to avoid jumping of the images during the page load. We will also set some styles for the images.

.flexslider .slides > li {
	display: none;
	-webkit-backface-visibility: hidden;
}

.flexslider .slides img {
	width: 100%;
	display: block;

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

To finish this step we will add some styles to clear the floats from the slides.

.slides:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }

STEP 3 – Container Styles

For the container we will set the background color to white and add a small shadow using the CSS3 property “box-shadow”. Then we will add 10px padding and the rounded corners.

.flexslider {
	position: relative;
	zoom: 1;
	padding: 10px;
	background: #ffffff;

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

	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
	-moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
	box-shadow: 0px 1px 1px rgba(0,0,0, .2);
}

I’ve set a minimum and maximum width for the slider. You may need to change it or remove when implementing on your project. We will set the zoom property to 1, this will avoid resizing on mobile browsers.

.flex-container {
	min-width: 150px;
	max-width: 960px;
}

.flexslider .slides { zoom: 1; }

STEP 4 – Next and Previous Arrows

For the next and previous buttons we will add a green CSS3 gradient, set the width and height, etc. To align the buttons vertically, we need to position them 50% from the top and add a negative margin, half of the button width.

.flex-direction-nav a {
	display: block;
	position: absolute;
	margin: -17px 0 0 0;
	width: 35px;
	height: 35px;
	top: 50%;
	cursor: pointer;
	text-indent: -9999px;

	background-color: #82d344;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
	background-image: -webkit-linear-gradient(top, #82d344, #51af34);
	background-image: -moz-linear-gradient(top, #82d344, #51af34);
	background-image: -o-linear-gradient(top, #82d344, #51af34);
	background-image: linear-gradient(to bottom, #82d344, #51af34);
}

The arrows will be added using the “:before” pseudo-selector. This pseudo selector allows us to include some content without adding a new tag in the html. To create that ribbon effect we will use a border trick to easily create shapes using only CSS, this shapes will also be included using a pseudo-selector, “:after”.

.flex-direction-nav a:before {
	display: block;
	position: absolute;
	content: '';
	width: 9px;
	height: 13px;
	top: 11px;
	left: 11px;
	background: url(../img/arrows.png) no-repeat;
}

.flex-direction-nav a:after {
	display: block;
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	top: 35px;
}

To finish the buttons will add the rounded corners, position them to right and left and add the “triangles” that will make the ribbon effect.

.flex-direction-nav .flex-next {
	right: -5px;

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

.flex-direction-nav .flex-prev {
	left: -5px;

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

.flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; }
.flex-direction-nav .flex-prev:before { background-position: 0 0; }

.flex-direction-nav .flex-next:after {
	right: 0;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #31611e;
}

.flex-direction-nav .flex-prev:after {
	left: 0;
	border-bottom: 5px solid transparent;
	border-right: 5px solid #31611e;
}

STEP 5 – Slider Controls

The slider controls are the little circles at the end of the slider that allows you to click on a slide. We’ll position this container at the bottom of the slider. Then we will create the circles using the “border-radius” and “box-shadow” property. For the active slide circle we will remove the box shadow and add the same CSS3 gradient that we used on the buttons.

.flexslider .flex-control-nav {
	position: absolute;
	width: 100%;
	bottom: -40px;
	text-align: center;
	margin: 0 0 0 -10px;
}

.flex-control-nav li {
	display: inline-block;
	zoom: 1;
}

.flex-control-paging li a {
	display: block;
	cursor: pointer;
	text-indent: -9999px;
	width: 12px;
	height: 12px;
	margin: 0 3px;
	background-color: #b6b6b6 \9;

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

	-webkit-box-shadow: inset 0 0 0 2px #b6b6b6;
	-moz-box-shadow: inset 0 0 0 2px #b6b6b6;
	box-shadow: inset 0 0 0 2px #b6b6b6;
}

.flex-control-paging li a.flex-active {
	background-color: #82d344;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
	background-image: -webkit-linear-gradient(top, #82d344, #51af34);
	background-image: -moz-linear-gradient(top, #82d344, #51af34);
	background-image: -o-linear-gradient(top, #82d344, #51af34);
	background-image: linear-gradient(to bottom, #82d344, #51af34);

	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

STEP 6 – Captions

We’re almost there, let just add some simple styles for the captions. Set the background color to black with a little bit of transparency using the rgba color mode. Then we will position it at the bottom of the slides.

.flexslider .slides p {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0 5px;
	margin: 0;

	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 20px;
	color: white;

	background-color: #222222;
	background: rgba(0,0,0, .9);

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

Conclusion

This is the end of this tutorial. I hope you find it useful and have learned something new from it. Feel free to use this slider on your next project or personal website. Don’t forget to follow us for more articles, tutorials and quality resources. Enjoy!

Preview

Download the Image Slider

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

40 Comments
  1. bsmity Nov 14, 6:41 pm

    Great tutorial! It looks like the image is very “jumpy” (image jumps from big to small in a hectic way) when you resize the browser window in chrome. Is this the java script?

    Reply
    +4
    • Valeriu Nov 14, 10:10 pm

      Thanks! I don’t see this “jumps”, It works the same in all browsers for me.

      Reply
      -1
  2. Anton Nov 30, 12:02 am

    Opened preview with Safari on my iPad, picture was rendered above the navigation arrow keys.

    Reply
    +1
  3. Desiree Dec 12, 6:00 pm

    Nice work! It runs perfectly smooth for me during resizing.
    Thanks for sharing!

    Reply
    +1
  4. Alexis Dec 14, 11:15 am

    Hi,

    And if I want to go on next slide every 15 secondes for example, How can I do that ?

    thanks

    Alexis

    Reply
    0
  5. Alexis Dec 18, 1:39 pm

    Thanks a lot for your help

    Reply
    +2
  6. Tin Aung Linn Dec 19, 2:17 pm

    This is amazing and well understandable to newbie.

    Thanks a lot.

    Reply
    +4
  7. Kevin Jan 26, 4:40 pm

    Nice work, but what size of images should I use? Because they don’t align in the box :(

    Reply
    +1
  8. Kevin Feb 21, 2:42 pm

    Hello,

    i’m working on a new website and i used some features of your website (great website btw ;)).

    So i have a banner, navigation and than the slider (I used the Responsive Image Slider).

    With the navigation i used submenu’s but now the submenu’s disappear beneath the slider. What can i do about it?

    Here is the link to the website:
    http://www.woefkesranch.be/navigatie/

    I hope you can help me.

    With kind regarts,
    Kevin

    Reply
    0
    • Ben Feb 28, 12:39 am

      Kevin,

      add a “z-index” to the subnav class ;)

      Such as “z-index” 100 or so (as long as it is higher than the slider). So in full your the class of ur nav list will look like:

      #nav ul.subnav {
      background: none repeat scroll 0 0 #FFFFFF;
      display: block;
      margin-left: -50px;
      position: absolute;
      visibility: hidden;
      width: 150px;
      z-index: 100;
      }

      ;)

      Reply
      0
  9. Liam Apr 30, 12:56 pm

    Hi, great tutorial, only one problem though, the next button seems to be above the previous button, I must of missed something out but can’t figure out what! any ideas?

    Reply
    +1
  10. Matteo Jul 31, 2:03 am

    great tutorial – thank you very much.

    I experienced a bug while developing my new website. Unfortunately I can’t implement two sliders on one page. The slider navigation seems to be broken and tries to call a slide from the other slider on the same page. I’m stuck! Does anybody have an idea how to solve this issue?

    so long,
    matteo

    Reply
    +3
  11. Rick Aug 31, 10:57 pm

    Awesome work!!

    What are the dimensions for the arrows.png file?

    I haven’t created that file and my photos are over top of the next and previous ribbons.

    Reply
    +1
    • Kshitiz Nov 26, 2:55 pm

      you just need to add z-index to bring those button above the images, inside this method (.flex-direction-nav a)

      Reply
      +1
  12. Capiedge Oct 3, 11:06 am

    Hi, thanks for sharing!

    I’m trying to put a with a logo inside it, overlaying the slider.
    Playing with css attributes, as position (absolute and relative), and z-index, I achieved what I want… But, the problem now is that the controls (side arrows), are un-clickable, nothing happens when you click it, since the logo div is over the slider…

    I guess that adjusting z-index parameters will solve the problem, but I’m not able to get it work…

    Any ideas?

    Many thanks!

    Reply
    +1
  13. Peter Oct 12, 4:33 pm

    Fantastic tutorial but I’ve got a few questions if possible ..

    what part of the css controls how much the image shrinks by ?

    if i have a screen size of between 500 and 800px (ie tablet sized screens) where would i find out how big the image is

    also the same for mobile phones ie 50-499px ??

    thanks in advance

    Reply
    +2
  14. Peter Oct 13, 10:32 pm

    another query for you …

    when i test locally my slider shows all 5 images in my html, when i upload it to my server it only shows 3 with white pages in between.

    anyone got any ideas what i need to change ?

    Reply
    +2
  15. M@rk Nov 3, 8:48 pm

    Hi Valeriu,

    tnx for the nice tutorial! I like it!
    It runs fantastic with all the modifications in the comments.

    Greating from Germany

    Reply
    +2
  16. Kevin Nov 6, 3:44 am

    Wonderful code! Can anyone point me in the right direction to stop the pause on mouseover?
    I don’t want the user to be able to pause the slideshow.

    Reply
    0
  17. Andrew Dec 2, 3:04 am

    I don’t have the continue and back arrows. Any suggestions?

    Reply
    +3
  18. kishor karpe Jan 10, 9:58 am

    hi.. plz send me link to download js/jquery.flexslider-min.js file.

    Thanks.

    Reply
    +1
  19. arjun menon Feb 1, 12:48 pm

    hi
    is it possible to modify it as a full window homepage background slider?
    it tried to do the usual stuff like –
    min-height: 100%;
    height: auto !important;
    height: 100%;

    it wont work.
    what can be done?

    Reply
    -2
  20. Jo Feb 26, 1:20 pm

    same issue with arrows…I made 1 sprite for both arrows but can’t seem to position them right. SO far I read your tut it is under the

    .flex-direction-nav a:before {
    display: block;
    position: absolute;
    content: ”;
    width: 9px;
    height: 25px;
    top: 3px;
    left: 11px;
    background: url(/img/arrows.png) no-repeat;
    }

    these settings only show 1 on the right and wrong order as well….pointing to the left….if I change the parameters adding a margin, I need a crazy negative margin to get that sprite over to the left….anyone who can help?

    Reply
    +1
  21. dmaster Mar 29, 1:08 pm

    I tried the tutorial, it’s so amazing. But I have one problem with this, I can’t resize the image height. Please help me, some good advice.

    THX

    Reply
    +1
  22. elyse Apr 14, 9:41 pm

    hey am having problems with arrows! may u can provide for us the folder of these arrows

    Reply
    +1
  23. Liz Apr 25, 2:46 am

    Hi,
    does anyone know how to remove the auto run? I only want the viewer to be able to scroll thru with pref/next

    Reply
    +1
  24. dipi Jul 29, 4:33 pm

    how to convert this slider in to full width image slider?

    Reply
    +1
    • Chris Jan 18, 7:49 pm

      This really depends on the containing html that’s around the slider. If you have the slider inside some div that’s x amount of pixels wide, then the slider will conform to that width.

      Reply
      +1
  25. Toshi Aug 20, 6:20 pm

    Thank you for this tutorial! Works really well.

    I’d like the auto slide to reset after the user has click on an arrow our nav button so the slider will carry on sliding. Is this possible?

    Thanks an d Regards
    Tosh

    Reply
    +1
  26. V. Kandiraja Jan 16, 9:05 am

    It works nice except that the first it does not start with the first image instead starts with third image and the pointer moves for first rotation(only the dot moves and the image is not changed). During the second rotation it works properly(the image and dot moves simultaneously). Please provide a solution for this.

    Reply
    +1
  27. Chris Jan 18, 8:01 pm

    This really is an awesome tutorial. I was able to take an existing rails project and make a slider out of it. Basically, my rails app is a simple image uploader where I then store links to images in a database. I then make a loop to call such images in a template. The slider code and css take care of the rest. The only thing I can’t seem to work is images of different heights. What happens is the green navigation jumps according to its css position. Code in question below:

    .flex-direction-nav a {
    display:block;
    position:absolute;
    margin: -17px 0 0 0;
    width:35px;
    height:35px;
    top:50%;
    cursor:pointer;
    text-indent: -9999px;
    background-color: #82d344;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
    background-image: -webkit-linear-gradient(top, #82d344, #51af34);
    background-image: -moz-linear-gradient(top, #82d344, #51af34);
    background-image: -o-linear-gradient(top, #82d344, #51af34);
    background-image: linear-gradient(to bottom, #82d344, #51af34);
    }

    Reply
    +1
  28. Zylphryx Jan 30, 1:11 am

    So a lot of what is being asked re: modifying animation, etc. is actually controlled by the FlexiSlider properties, which can be found here:

    https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

    For example, if you wanted to have the slides fade from one to the other (controlled by ‘animation’), not have the circle nav under the slideshow (controlled by ‘controlNav’), have the slides be controlled manually instead of automatically advancing (controlled by ‘slideshow’), your call for Flexislider would look like this.

    $(document).ready(function () {
    $(‘.flexslider’).flexslider({
    animation: ‘fade’,
    controlsContainer: ‘.flexslider’,
    controlNav: false,
    slideshow: false
    });
    });

    Reply
    +1
  29. Patrick Feb 9, 1:18 pm

    hi , I’m in trouble, when I click the navigation arrows ( direction or control nav ) , the AutoSlide stops working automatically , has some way to resolve this ? if someone could help me , I thank

    Reply
    +1
  30. Frank Feb 11, 5:13 am

    I was going to implement this slider as part of a website update, but I’m finding out that the image slideshow area does not display for Internet Explorer 8 users within the client’s company. And I’m told they don’t plan on upgrading their computers any time soon. Crazy, yes. But I’m wondering if you have any insight into what specifically would not work for IE8 users. CSS3 won’t work, but I doubt that is why the slideshow just disappears and leaves a blank space in the UI.

    Reply
    +1
  31. Ashan Perera Apr 7, 8:01 pm

    Thanks for sharing such a nice tutorial which is understandable.

    question : How and where can i get the image for the below ?

    background: url(../img/arrows.png) no-repeat;

    Thanks,
    Ashan.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters


Download Web Design Freebies & Resources

psd

You have Successfully Subscribed!