jQuery

【jQuery】レスポンシブ対応スライダーResponsive Layered Slider

July 6, 2015

レスポンシブ対応のスライダーResponsive Layered Slider
デモにはFade,Bounce,Roll,Flip,Zoom,Combinedの６つのスライダーデモがあります。
18個の効果も準備されていて、それぞれに設定が可能のようです。

HTML

<div class="sim-slider" data-width="2550" data-height="1240" data-animation="250" data-current="true" data-progress="true">
<div class="sim-slider-inner">
</div>
</div>

オプション

//options
var selected_element = $('.sim-slider');
var controls_color = 'rgba(150,40,189,0.5)';
var controls_hover_color = 'rgba(150,40,189,1)';    
var progress_size = '3';
var current_slide = 1;
var per_slide_duration =  selected_element.attr('data-animation');
var end_duration = 3000;

Demo/Download