SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to autoslide jquery banner slider

    So i have this banner slider that moves on click of a trigger.
    How can I get this to automatically slide from one banner to the next automatically after a few seconds yet still keep the click feature too.

    I've looked into using setInterval but i just cant figure out how to tweak this code to work how i want.

    Thank you.


    HTML Code:
    $(document).ready(function() {
    
    
     $(".folio_block").each(function() {
     
     //Set Default State of each portfolio piece
     $(this).find(".paging").show();
     $(this).find(".paging a:last").addClass("active");
     
     //Inject <span> for Tool tip
     $(this).find(".image_reel a").append("<span></span>");
     $(this).find(".image_reel span").css({"opacity" : "0"});
     
     //Get size of images, how many there are, then determin the size of the image reel.
     var windowWidth = $(this).find(".image_reel span").width();
     var imageSum = $(this).find(".image_reel img").size();
     var imageReelWidth = windowWidth * imageSum;
     
     //Adjust the image reel to its new size
     $(this).find(".image_reel").css({'width' : imageReelWidth});
     
     }); 
    
     //Hover Effect for Tooltip
     $(".image_reel a").hover(function() {
     $(this).find("span").stop().animate({ opacity: 0.2}, 200 ).show();
     }, function() {
     $(this).find("span").stop().animate({ opacity: 0}, 200 );
     });
    
     //Pagin events
     $(".paging a").click(function() {
     
     var triggerID = $(this).attr("rel") - 1;
     alert (triggerID);
     var imgWidth = $(this).parent().parent().find("img").width();
     var image_reelPosition = triggerID * imgWidth;
     
     //Ignore if Active
     if ( $(this).hasClass("active")) { 
     //Do Nothing
     }
     else {
     //Set active paging
     $(this).parent().parent().find(".paging a").removeClass("active");
     $(this).addClass("active");
    
     //image_reel Image
     $(this).parent().parent().find(".image_reel").animate({ 
     left: -image_reelPosition
     }, 300 );
     }
     return false;
     
     });
    });

  2. #2
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think easySlider1.7 has that functionality and it's easy to use.
    MrBaseball34
    Hook'Em Horns!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •