How To Make a Simple Slideshow With jQuery

Some time I see many people are confuse and inbox me. How to create a simple slider with jQuery? Now I launched very easy complete tutorial.

In this post I'll teach you how to make a simple slideshow with jQuery in blogger, wordpress or any commercial website. In fact there are many ways to do sileshow images from simple to complex, however GenieYard still writing mainly because this is the easiest way to do that GenieYard sildeshow learned and apply it in genie-demo-blogger template.

It is easy to read code that a person did not know anything about JS can also understand it, is consistent with the criteria amateur web design for beginners. 

1. HTML Code

Simply, the photograph with card insert 3 <img> and surround it with a card <div>. For ease of formatting and decoration attaching a id = "slideshow". Finally copy the HTML code

jquery slideshow by www.genieyard.blogspot.com
<Div id = "slideshow" >
     <Img src = "imgurl/imgurl1.jpg" alt = "" class = "active" />
     <Img src = "imgurl/imgurl2.jpg" alt = "" />
     <Img src = "imgurl/imgurl3.jpg" alt = "" />
</ Div >  

A special point to note is that if you want any picture to appear top, then assigned to the class = "active" 

2. CSS Code

The point to note in this code is the height Slideshow customized depending on the location of code and images, When deep consideration we see this code also provides the coordinates of the images in 3-space Attribute dimension, z-index order placement provisions photos. There are 3 class, the highest class - active (10), the next layer active (9) and all remaining photos (8).

#slideshow {
    position:relative;
    height:350px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
} 

3. JQuery Code

Now, we begin to write a script to start your slide motion. The above code has the following meanings: First, declare a variable, class photo that has active then assign the variable $ active and head, it's picture next turn next $ . Start running SlideSwitch function. Files $ next class mounted active to bring it up on end and shots are $ active shall be removed down to the active class. Finally the interval 5000ms 5 seconds between each switch. it's to easy!

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();    
    
    $next.addClass('active');
    
    $active.removeClass('active');
}
$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Final Words: As mentioned there are many ways to do the most with jQuery Image Slideshow more complex and much more beautiful. But the problem is that the slideshow will be heavy and difficult to edit a lot more customizable. GenieYard view is still how to use the simplest way to achieve the highest efficiency. To achieve this is the only way to understand what you're doing.

Hopefully with this tutorial you can learn and customize according to your slideshow. VD as resizing slideshow, display time of each image, the blur, add link for each image , and even combine it with Recent Posts widget. I wish you creative success.

loading...

loading...

• email
• facebook
• linkedin
• twitter
• reddit
• google+

Author Name

Author Description!

Get Free Email Updates to your Inbox!

• Rss
• Twitter
• FaceBook
• Google +