Slider is a fun way of rotating your images instead of a plain thumb that consumes a lot of site’s space. It also adds value to your site as it runs dynamically.
Although there are different ways to create a slider using CSS3 alone, there might be some drawbacks. When users navigate your site on older browsers like IE 8 or below there might be some inconsistency with the design or worse the functionality itself.
That’s why in this tutorial I am going to show you how to create a basic rotating slider with navigation using both CSS3 and jQuery.
Ok let’s start.
Things you need for this tutorial
- Google’s jQuery Hosted Library
- Any images with 750 X 300px height
- Basic Knowledge with CSS3 and jQuery
STEP 1 – The Markup
The slider html markup is very simple, we’ll wrap everything with a div class slider and then inside it we’ll place the slide images.
For the slider we will create two buttons and will wrap them with a div class slider nav. We’ll also put some data attribute to embed some custom data.
Check out the codes below.
<div class="slider"> <ul> <li><img src="images/slide1.jpg" alt="image"></li> <li><img src="images/slide2.jpg" alt="image"></li> <li><img src="images/slide3.jpg" alt="image"></li> <li><img src="images/slide4.jpg" alt="image"></li> </ul> </div> <div id="slider-nav"> <button data-dir="prev"> « Previous</button> <button data-dir="next" >Next »</button> </div>
STEP 2 – The CSS
First we will some basic styles for our body elements such as the background color, width and so on.
body {
width:750px;
margin:85px auto 0;
background:#f0eeee;
font-family:'Open Sans'
}
* {
margin:0;
padding:0
}
Now that we have our basic styles for our body, let’s go ahead and style our slider navigation and the slider itself.
Below you can see that we set the slider nav to display nothing, this will make sense later as we go along to our jQuery part. We also set some cool box shadow on our container.
#slider-nav {
display:none;
margin-top:1em
}
#slider-nav button {
font-family:'Open Sans';
font-weight:300;
padding:.8em 1em
}
.slider {
width:inherit;
height:300px;
overflow:scroll;
-webkit-box-shadow:1px 1px 8px 0 rgba(50,50,50,0.75);
-moz-box-shadow:1px 1px 8px 0 rgba(50,50,50,0.75);
box-shadow:1px 1px 8px 0 rgba(50,50,50,0.75)
}
Finally, we can now add styles to our list of slides. Each list will be float on the left and we’ll remove the list style.
.slider ul {
width:10000px;
list-style:none
}
.slider li {
float:left
STEP 3 – The jQuery
For this part of the tutorial, create a new js file and name it custom.js. This will contain our jQuery code that will manipulate the slides of our basic slider.
Now go ahead and copy the code below and paste on the custom.js you just created.
function Slider( container, nav ) {
this.container = container;
this.nav = nav.show();
this.imgs = this.container.find('img');
this.imgWidth = this.imgs[0].width; // 600
this.imgsLen = this.imgs.length;
this.current = 0;
}
Slider.prototype.transition = function( coords ) {
this.container.animate({
'margin-left': coords || -( this.current * this.imgWidth )
});
};
Slider.prototype.setCurrent = function( dir ) {
var pos = this.current;
pos += ( ~~( dir === 'next' ) || -1 );
this.current = ( pos < 0 ) ? this.imgsLen - 1 : pos % this.imgsLen;
return pos;
};
In the code above we created a function name Slider and parse the container and nav. There rest of the code will identify the image width length and so on.
Notice that we also use the .animate function which performs a custom animation of a set of CSS properties. This may work but we need to run it on our main html file. So let’s do it.
Go ahead and copy the codes below on your main html file.
(function() {
var container = $('div.slider').css('overflow', 'hidden').children('ul'),
slider = new Slider( container, $('#slider-nav') );
slider.nav.find('button').on('click', function() {
slider.setCurrent( $(this).data('dir') );
slider.transition();
});
})();
The JavaScript code above will target slider class and will take the unordered list images slides. It will also set the slider navigation to make it rotate and give it a slider transition.
Note: You must also add the following codes for jQuery Hosted Library and the custom.js file link above this code to make it work. See codes below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="custom.js"></script>
Conclusion
This is the end of this tutorial. I hope you find it useful and have learned something new from it. Sliders are great way to display your images. If you have any question please feel free to drop your comments below and don’t forget to subscribe!
