반응형
반응형

 

Slidesjs - 원하는 페이지로 이동시킬때.

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

Step 1: Link required files

First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.

<!-- 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" />

Step 2: Create HTML markup

Create a <ul class="bxslider"> element, with a <li> for each slide. Slides can contain images, video, or any other HTML content!

<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>

Step 3: Call the bxSlider

Call .bxslider() on <ul class="bxslider">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

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

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


반응형
반응형

Jump.js is a modern, dependency-free smooth scrolling library. It’s easy to use and was built with a modern JavaScript workflow in mind.

jump

반응형
반응형

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.

unslider

 

 

반응형
반응형

Comic.js: Cartoon style drawing for HTML5 Canvas and more

 

 

Javascript library that acts as plugin for Raphael.js, D3.js, SVG.js or as lib for the HTML5 Canvas, providing functions for cartoon style drawing.

Provides either methods for drawing comic style shapes (cEllipse, cLine, cRect, ...) or the magic method for cartoonizing an already existing SVG. When using the magic method or drawing on a canvas no further libraries are required.

 

screenshot screenshot

 

Examples

 

Cartoonized D3 examples: D3 Cartoonized!

 

Cartoon R widget built by Kent Russell using comic.js: R Cartoonized!

Raphael.js, D3.js, SVG.js, Canvas,

 

using "magic": on images, on drawings

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.

반응형
반응형

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.

parallax

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/

 

 

 

 

 

 

 

 

 

 

 

.

반응형

+ Recent posts