このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.ferro.ferroSlider.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.transit.min.js"></script>
<script src="<PATH>/jquery.ferro.ferroSlider.min.js"></script>
<script>
	$(window).load(function(){
		var Page = (function() {
	
			var $nav = $( '#nav-dots > span' ),
				slitslider = $( '#slider' ).slitslider( {
					onBeforeChange : function( slide, pos ) {
						
						$nav.removeClass( 'nav-dot-current' );
						$nav.eq( pos ).addClass( 'nav-dot-current' );
						
					}
				} ),
				
				init = function() {
					
					initEvents();
					
				},
				initEvents = function() {
					
					$nav.each( function( i ) {
						
						$( this ).on( 'click', function( event ) {
							
							var $dot = $( this );
							
							if( !slitslider.isActive() ) {
								
								$nav.removeClass( 'nav-dot-current' );
								$dot.addClass( 'nav-dot-current' );
								
							}
							
							slitslider.jump( i + 1 );
							return false;
							
						} );
						
					} );
					
				};
			
			return { init : init };
			
		})();
		
		Page.init();
	});
</script>
<div id="slider" class="sl-slider-wrapper">
	<div class="sl-slider">
		
		<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
			<div class="sl-slide-inner">
				<p><img src="<PATH>/img04.jpg" alt=""></p>
			</div>
		</div>
		
		<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
			<div class="sl-slide-inner">
				<p><img src="<PATH>/img03.jpg" alt=""></p>
			</div>
		</div>
		
		<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
			<div class="sl-slide-inner">
				<p><img src="<PATH>/img06.jpg" alt=""></p>
			</div>
		</div>
		
		<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
			<div class="sl-slide-inner">
				<p><img src="<PATH>/img08.jpg" alt=""></p>
			</div>
		</div>
		
		<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
			<div class="sl-slide-inner">
				<p><img src="<PATH>/img01.jpg" alt=""></p>
			</div>
		</div>
	</div>
	
	<nav id="nav-dots" class="nav-dots">
		<span class="nav-dot-current"></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</nav>
	
</div>

FullscreenSlitSliderについて

Fullscreen Slit Sliderは、様々なエフェクトでスライドを実装できるプラグインです。
若干設定が手間で、ややこしい感じがありますが、他のプラグインとは一味違うダイナミックな動作は試す価値ありです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • FlexSlider

    FlexSlider

    簡単に多機能なスライダーを設置でき、豊富なオプションを備えている

  • SlidesJS

    SlidesJS

    シンプルなスライダー

  • bxSlider

    bxSlider

    とても簡単にスライダーを設置することができ、機能も豊富

  • NivoSlider

    NivoSlider

    簡単にリッチなスライダーを設置

  • AwkwardShowcase

    AwkwardShowcase

    シンプルなスライダーからちょっと豪華なスライダーまで幅広く設定可能