[javascript] Carousel - Step carousel

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.

1
2
3
4
5

Back Forward
Currently showing panels: 3 to 5



크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/05/03 19:38 2011/05/03 19:38
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6138

Trackback URL : http://tcbs17.cafe24.com/tc/trackback/6138

« Previous : 1 : ... 17 : 18 : 19 : 20 : 21 : 22 : 23 : 24 : 25 : ... 324 : Next »

블로그 이미지

- 홍반장

Archives

Recent Trackbacks

Calendar

«   2024/11   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Statistics Graph

Site Stats

Total hits:
240341
Today:
137
Yesterday:
856