Area Pelanggan

Making a jQuery infinite carousel

First of all, i will make a code different jQuery carousel and implement the features you wanted.

If you saw the first tutorial you will notice that the HTML and CSS are almost the same, only the jQuery coding changed in a bigger scale.

 

HTML

 

carousel_1

 

 

 view plaincopy to clipboardprint?
  1. <div id=‘carousel_container’>  
  2.   <div id=‘left_scroll’><a href=‘javascript:slide(“left”);’><img src=‘left.png’ /></a></div>  
  3.     <div id=‘carousel_inner’>  
  4.         <ul id=‘carousel_ul’>  
  5.             <li><a href=‘#’><img src=‘item1.png’ /></a></li>  
  6.             <li><a href=‘#’><img src=‘item2.png’ /></a></li>  
  7.             <li><a href=‘#’><img src=‘item3.png’ /></a></li>  
  8.             <li><a href=‘#’><img src=‘item4.png’ /></a></li>  
  9.             <li><a href=‘#’><img src=‘item5.png’ /></a></li>  
  10.   
  11.         </ul>  
  12.     </div>  
  13.   <div id=’right_scroll’><a href=’javascript:slide(“right”);’><img src=’right.png’/></a></div>
  14.   <input type=‘hidden’ id=‘hidden_auto_slide_seconds’ value=0 />  
  15. </div>  

 

Only one of these properties needs to be explained further. The left margin of our unordered list is -210px. That’s because the last item will be moved before the first item, so we are setting the left margin to a negative number of the item’s width.

 

CSS

 

view plaincopy to clipboardprint?
  1. #carousel_inner {  
  2. float:left; /* important for inline positioning */  
  3. width:630px; /* important (this width = width of list item(including margin) * items shown */  
  4. overflow: hidden;  /* important (hide the items outside the div) */  
  5. /* non-important styling bellow */  
  6. background: #F0F0F0;  
  7. }  
  8.   
  9. #carousel_ul {  
  10. position:relative;  
  11. left:-210px; /* important (this should be negative number of list items width(including margin) */  
  12. list-style-type: none; /* removing the default styling for unordered list items */  
  13. margin: 0px;  
  14. padding: 0px;  
  15. width:9999px; /* important */  
  16. /* non-important styling bellow */  
  17. padding-bottom:10px;  
  18. }  
  19.   
  20. #carousel_ul li{  
  21. float: left; /* important for inline positioning of the list items */  
  22. width:200px;  /* fixed width, important */  
  23. /* just styling bellow*/  
  24. padding:0px;  
  25. height:110px;  
  26. background: #000000;  
  27. margin-top:10px;  
  28. margin-bottom:10px;  
  29. margin-left:5px;  
  30. margin-right:5px;  
  31. }  
  32.   
  33. #carousel_ul li img {  
  34. .margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href…>) so this is to fix that */  
  35. /* styling */  
  36. cursor:pointer;  
  37. cursor: hand;  
  38. border:0px;  
  39. }  
  40. #left_scroll, #right_scroll{  
  41. float:left;  
  42. height:130px;  
  43. width:15px;  
  44. background: #C0C0C0;  
  45. }  
  46. #left_scroll img, #right_scroll img{  
  47. border:0; /* remove the default border of linked image */  
  48. /*styling*/  
  49. cursor: pointer;  
  50. cursor: hand;  
  51.   
  52. }  

 

 

carousel_3

 

 

Now, the main part…

 

JQuery

 

view plaincopy to clipboardprint?
  1.   $(document).ready(function() {  
  2.   
  3.         //options( 1 – ON , 0 – OFF)  
  4.         var auto_slide = 1;  
  5.             var hover_pause = 1;  
  6.         var key_slide = 1;  
  7.   
  8.         //speed of auto slide(  
  9.         var auto_slide_seconds = 5000;  
  10.         /* IMPORTANT: i know the variable is called …seconds but it’s 
  11.         in milliseconds ( multiplied with 1000) ‘*/  
  12.   
  13.         /*move the last list item before the first item. The purpose of this is 
  14.         if the user clicks to slide left he will be able to see the last item.*/  
  15.         $(‘#carousel_ul li:first’).before($(‘#carousel_ul li:last’));  
  16.   
  17.         //check if auto sliding is enabled  
  18.         if(auto_slide == 1){  
  19.             /*set the interval (loop) to call function slide with option ‘right’ 
  20.             and set the interval time to the variable we declared previously */  
  21.             var timer = setInterval(‘slide(“right”)’, auto_slide_seconds);  
  22.   
  23.             /*and change the value of our hidden field that hold info about 
  24.             the interval, setting it to the number of milliseconds we declared previously*/  
  25.             $(‘#hidden_auto_slide_seconds’).val(auto_slide_seconds);  
  26.         }  
  27.   
  28.         //check if hover pause is enabled  
  29.         if(hover_pause == 1){  
  30.             //when hovered over the list  
  31.             $(‘#carousel_ul’).hover(function(){  
  32.                 //stop the interval  
  33.                 clearInterval(timer)  
  34.             },function(){  
  35.                 //and when mouseout start it again  
  36.                 timer = setInterval(‘slide(“right”)’, auto_slide_seconds);  
  37.             });  
  38.   
  39.         }  
  40.   
  41.         //check if key sliding is enabled  
  42.         if(key_slide == 1){  
  43.   
  44.             //binding keypress function  
  45.             $(document).bind(‘keypress’, function(e) {  
  46.                 //keyCode for left arrow is 37 and for right it’s 39 ‘  
  47.                 if(e.keyCode==37){  
  48.                         //initialize the slide to left function  
  49.                         slide(‘left’);  
  50.                 }else if(e.keyCode==39){  
  51.                         //initialize the slide to right function  
  52.                         slide(‘right’);  
  53.                 }  
  54.             });  
  55.   
  56.         }  
  57.   
  58.   });  
  59.   
  60. //FUNCTIONS BELLOW  
  61.   
  62. //slide function  
  63. function slide(where){  
  64.   
  65.             //get the item width  
  66.             var item_width = $(‘#carousel_ul li’).outerWidth() + 10;  
  67.   
  68.             /* using a if statement and the where variable check 
  69.             we will check where the user wants to slide (left or right)*/  
  70.             if(where == ‘left’){  
  71.                 //…calculating the new left indent of the unordered list (ul) for left sliding  
  72.                 var left_indent = parseInt($(‘#carousel_ul’).css(‘left’)) + item_width;  
  73.             }else{  
  74.                 //…calculating the new left indent of the unordered list (ul) for right sliding  
  75.                 var left_indent = parseInt($(‘#carousel_ul’).css(‘left’)) – item_width;  
  76.   
  77.             }  
  78.   
  79.             //make the sliding effect using jQuery’s animate function… ‘  
  80.             $(‘#carousel_ul:not(:animated)’).animate({‘left’ : left_indent},500,function(){  
  81.   
  82.                 /* when the animation finishes use the if statement again, and make an ilussion 
  83.                 of infinity by changing place of last or first item*/  
  84.                 if(where == ‘left’){  
  85.                     //…and if it slided to left we put the last item before the first item  
  86.                     $(‘#carousel_ul li:first’).before($(‘#carousel_ul li:last’));  
  87.                 }else{  
  88.                     //…and if it slided to right we put the first item after the last item  
  89.                     $(‘#carousel_ul li:last’).after($(‘#carousel_ul li:first’));  
  90.                 }  
  91.   
  92.                 //…and then just get back the default left indent  
  93.                 $(‘#carousel_ul’).css({‘left’ : ‘-210px’});  
  94.             });  
  95.   
  96. }  

 

That’s it, hope you like this revisit and upgrade of the first jquery infinite carousel, and if you wish some more stuff to be implemented now it should be easy to make it into this coding.

Share the Post:

Related Posts

Mengenal Carousel

Bila tingkat persentase engagement media sosial bisnis Anda rendah, maka konten carousel adalah salah satu pilihan yang tepat untuk mengatasi masalah tersebut.

Read More

Jelajahi Layanan Kami

Kami Siap Membantu Anda

Domain

Hosting

Website

Tentang Kami

Karir

Artikel

support@script-media.net
+62 813-2546-8740

Jl. Permadi No.II/1760, Wirogunan, Kec. Mergangsan,
Kota Yogyakarta, Daerah Istimewa Yogyakarta 55151

Kebijakan             © 2024 Scriptmedia