Multi-Screen.js: Turn a single page into a collection of screens

Prezi 같은 느낌 구현

Multi-Screen.js is a lightweight jQuery plugin that lets you turn a single page into a collection of screens with animated navigation. It’s as simple as dividing up your single page into divs to correspond with each screen.

This colorful jQuery Cheat Sheet is your one-stop reference for the jQuery API. It covers selectors, attributes, CSS, events, effects, and much more.

Unslider 2.0: An ultra-simple jQuery slider - 슬라이드  carousel

Unslider (now in version 2.0) is a super simple jQuery carousel/image slider. It has a variety of options available, including animation, a totally manual option, infinite sliders, and more.

.

.

http://www.slidesjs.com/

http://stackoverflow.com/questions/16043600/refresh-slidejs

$('#SLIDESID').slidesjs({
    //...
});

// ... later somewhere else ... //

var currentIndex = $('#SLIDESID').data().plugin_slidesjs.data.current;

//remove active tab
$('#SLIDESID [slidesjs-index="' + currentIndex + '"]').remove();
$('#SLIDESID [data-slidesjs-item="' + currentIndex  + '"]').parent().remove();

//reindex tabs
var tabs = $('#SLIDESID [slidesjs-index]');
tabs.each(function(idx, elem){
    $(elem).attr('slidesjs-index', idx);
});

//reindex pagination
$('#SLIDESID [data-slidesjs-item]').each(function(idx, elem){
    $(elem).attr('data-slidesjs-item', idx);
    $(elem).text(idx+1);
});

//tweek plugin data
$('#SLIDESID').data().plugin_slidesjs.data.total = tabs.length;
$('#SLIDESID').data().plugin_slidesjs.data.current--;

//animate to new element by clicking on NEXT
$('#SLIDESID .slidesjs-next').click();

 bxSlider

The Responsive jQuery Content Slider

Why should I use this slider?

• Fully responsive - will adapt to any device
• Horizontal, vertical, and fade modes
• Slides can contain images, video, or HTML content
• Advanced touch / swipe support built-in
• Uses CSS transitions for slide animation (native hardware acceleration!)
• Full callback API and public methods
• Small file size, fully themed, simple to implement
• Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
• Tons of configuration options

How to install

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

Check the examples and FAQs for more information on installation and customization

Unslider 2.0: An ultra-simple jQuery slider

The simplest jQuery slider there is. http://unslider.com

The easiest way to get a simple slider up and running in seconds. All you need is some valid markup, jQuery and some extra CSS, and Unslider can do the rest.

Check the docs out: http://unslider.com

Unslider (now in version 2.0) is a super simple jQuery carousel/image slider. It has a variety of options available, including animation, a totally manual option, infinite sliders, and more.

jQuery.parallax: Parallax scrolling with jQuery

중첩된 이미지 레이어 스크롤 구현~

jQuery.Parallax turns nodes into absolutely positioned layers that move in response to the user’s mouse. Layers move at different rates depending on their dimensions.

jquery.parallax

What does jquery.parallax do?

jquery.parallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions, and on the options passed in, these layers move at different rates, in a parallaxy kind of way.

Demos and docs

stephband.info/jparallax/

.