Image Slider Using jquery

Manju lata Yadav
10y
4.9k
0
4

Blog

Slider.rar

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>

Step 2: CSS

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.
1. #slider{
2. width:900px;
3. height:400px;
4. margin: 10%;
5. margin-left:15%;
6. overflow:hidden;
7. }
8. .slides{
9. display:block;
10. width:6000px;
11. height:400px;
12. margin-left:0;
13. padding:0;
14. }
15. .slide{
16. float:left;
17. list-style-type:none;
18. width:900px;
19. height:400px;
20. }
21. img{
22. width:900px;
23. height:400px;
24. }

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.
  1. $(function()
  2. {
  3. //value for animation
  4. var width = 900;
  5. var animationSpeed = 1000;
  6. var pause = 3000;
  7. var currentSlide = 1;
  8. //Dom element.
  9. var $slider = $('#slider');
  10. var $sliderAnimation = $slider.find('.slides');
  11. var $slides = $sliderAnimation.find('.slide');
  13. setInterval(function()
  14. {
  15. $sliderAnimation.animate({'margin-left': '-='+width}, animationSpeed, function(){
  16. currentSlide ++;
  17. if(currentSlide === $slides.length)
  18. {
  19. $sliderAnimation.css('margin-left', 0);
  20. currentSlide = 1;
  21. }
  22. });
  23. },pause);
  24. });

Image Slider Using jquery

Up Next

Image zoom in ASP.Net using Jquery and Elevate plug-in

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all