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.

SEE ALSO: AngularJS: A Detailed Guide for Beginners

<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.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

.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

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

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

30 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
    +3
    • Valeriu Nov 14, 10:10 pm

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

      Reply
      0
  2. Anton Nov 30, 12:02 am

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

    Reply
    0
  3. Desiree Dec 12, 6:00 pm

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

    Reply
    0
  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
    +3
  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
    0
  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
    0
  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
    +2
  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
      0
  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
    0
  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
    0
  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
    0
  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
    +1
  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
    +1
  18. Miguel Jan 4, 2:47 am

    Hi, great tutorial!

    Im working on my portfolio site http://www.webbroom.se. Instead of images i used videos from youtube as the content. i added them as objects.

    Code works gr8 in chrome and opera ,
    but in firefox it only shows the first slide,
    In Safari the video isnt clickable and wont start at all.
    dont know about IE9 yet, im working on Mac os x lion…

    do you guys know why its bugging on these other browsers?

    Reply
    0
  19. kishor karpe Jan 10, 9:58 am

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

    Thanks.

    Reply
    0
  20. 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
    0
  21. 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
    0
  22. 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
    0
  23. elyse Apr 14, 9:41 pm

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

    Reply
    0
  24. 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
    0

Leave a Reply

*
* Minimum length: 20 characters