In this blog we will make a simple jquery image Slider. We will use three files HTML, CSS and Javascript.
Step 1: HTML page
We are using <div id="slider"> having <ul class="slides"> having <li class="slide">
Trick:
Image in first and last Image is same. If you will not use this trick then there will be problem in flow of slides at last slide.
- <!Doctype html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset-UTF-8"/>
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
- <script src="slider.js"></script>
- <link rel="stylesheet" href="slider.css" />
- </head>
- <body>
- <div class="container">
- <header>
- <div id="slider">
- <ul class="slides">
- <li class="slide"><img src="images/apple.jpg"/></li>
- <li class="slide"><img src="images/banana.jpg"/></li>
- <li class="slide"><img src="images/blueberry.jpg"/></li>
- <li class="slide"><img src="images/guava.jpg"/></li>
- <li class="slide"><img src="images/jamun.jpg"/></li>
- <li class="slide"><img src="images/apple.jpg"/></li>
-
- </ul>
- </div>
- </header>
- </div>
- </body>
- </html>
Now in CSS we have some tasks: - How to make visible only one image.
=>We make slider with fixed width and height and use overflow as hidden.
- We have 5 images. So we keep width as 6000px.
- We want slider to float left. So we use slide class as float: left.
- #slider{
- width:900px;
- height:400px;
- margin: 10%;
- margin-left:15%;
- overflow:hidden;
- }
- .slides{
- display:block;
- width:6000px;
- height:400px;
- margin-left:0;
- padding:0;
- }
- .slide{
- float:left;
- list-style-type:none;
- width:900px;
- height:400px;
- }
- img{
- width:900px;
- height:400px;
- }
Step 3: Javascript
Below javascript code is responsible for smooth running slider.
- SetInterval(): We can automate a task based on time using the JavaScript setInterval() function which can be used to specify a regular time based trigger. The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.
- We will do jquery selection at once only and use it again and again for faster selection.
- At a point all six image will pass then we have no image to show.
=> So, we use a callback function inside SetInterval() function.
- We use var currentSlide = 1 and we will increase currentSlide by 1.
- We check when currentSlide is at last image we again set currentSlide = 1.
- We set left margin to 0. So we get first image again.
- $(function()
- {
-
- var width = 900;
- var animationSpeed = 1000;
- var pause = 3000;
- var currentSlide = 1;
-
- var $slider = $('#slider');
- var $sliderAnimation = $slider.find('.slides');
- var $slides = $sliderAnimation.find('.slide');
-
- setInterval(function()
- {
- $sliderAnimation.animate({'margin-left': '-='+width}, animationSpeed, function(){
- currentSlide ++;
- if(currentSlide === $slides.length)
- {
- $sliderAnimation.css('margin-left', 0);
- currentSlide = 1;
- }
- });
- },pause);
- });