$(".CarouSlide").CarouSlide();

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

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

(0) (0)

Posted by 홍반장

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 홍반장

Step Carousel Viewer v1.9

Description: Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three "status" variables are here for that purpose. Some highlights of this script:

• Contents for the Step Carousel Viewer can be defined either directly inline on the page or via Ajax and extracted from an external file instead.

• Ability to specify whether panels should wrap after reaching the two ends, or stop at the first/last panel.

• Panel persistence supported, so the last viewed panel can be remembered and recalled within the same browser session.

• Ability for Carousel to auto rotate as dictated by the new parameter: autostep: {enable:true, moveby:1, pause:3000} During this mode, Carousel pauses onMouseover, resumes onMouseout, and clicking Carousel halts auto rotation altogether.

• Option to specify two navigational images that's automatically positioned to the left and right of the Carousel Viewer to move the panels back and forth.

• Ability to auto generate pagination images based on the total number of panels within a Carousel and positioned anywhere on the page. v1.8 feature

• The contents of a Carousel can be updated on demand after the page has loaded with new contents from an external file. v1.8 feature

Demo #1: Auto rotation enabled (every 3 seconds, 1 panel each time), left/right nav buttons enabled, pagination buttons enabled.

Demo #2: Wrap around enabled ("slide"), left/right nav buttons enabled, pagination buttons enabled, status variables enabled.

Current Panel: 1 Total Panels: 5

Back 1 Panel Forward 1 Panel To 1st Panel Forward 2 Panels

Demo #3: Wrap around enabled ("pushpull"), variable content widths, moves 2 panels at a time, illustration of new content loaded on demand.

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

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

(0) (0)

Posted by 홍반장

• Noble Template Demo with Ken Burns effect
• Mellow Template Demo with Blast effect
• Flux Template Demo

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

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

(0) (0)

Posted by 홍반장