긍적적인 사고, 음식의 절제, 규칙적인 운동

Add an infinite carousel on your site, the easy way. See a Demo here

Features

• Really easy way to insert a quality HTML carousel on your site
• Loop infinitely over items when clicking next or previous button
• Avoid animation flickering due to multi-clicks on next and previous buttons

Some HTML

<div id="viewport"> 
<ul> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
        <li>4</li> 
        <li>5</li> 
</ul> 
</div> 
<a id="previous">Previous</a> 
<a id="next">Next</a> 
 
<!--  
ul/li structure can be replaced by any other html structure as div/div, div/span...  
-->

Some CSS

/* Comments on styles purpose in the source code */ 
#viewport{ 
        width: 240px; 
        overflow:hidden; 
} 
#viewport ul{ 
        position: relative; 
        padding: 0; 
} 
#viewport li{ 
        width: 100px; 
        height: 50px; 
        float: left; 
        list-style: none; 
}

Some JavaScript : the magic

$('#viewport').carousel('#previous', '#next');

Tips

If you need to activate auto-scrolling on your carousel, simply simulate a click :

//The auto-scrolling function 
function slide(){ 
  $('#simpleNext').click(); 
} 
//Launch the scroll every 2 seconds 
var intervalId = window.setInterval(slide, 2000); 
 
//On user click deactivate auto-scrolling 
$('#previous, #simpleNext').click( 
 function(event){ 
  if(event.originalEvent){ 
   window.clearInterval(intervalId); 
  } 
 } 
);

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0) (0)

Posted by 홍반장