ノーマルタイプ

サムネイルと連動

アニメーションをCSS3で

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

  • files
  • js
  • html
<link href="<PATH>/jcarousel.basic.css" rel="stylesheet" />
<link href="<PATH>/jcarousel.connected-carousels.css" rel="stylesheet" />
<link href="<PATH>/jcarousel.transitions.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.jcarousel.min.js"></script>
<script>
	$(window).load(function(){
		//ノーマルタイプ
 		$('#jcarouselDemoBox01 .jcarousel').jcarousel();
		$('.jcarousel-control-prev')
		.on('jcarouselcontrol:active', function() {
			$(this).removeClass('inactive');
		})
		.on('jcarouselcontrol:inactive', function() {
			$(this).addClass('inactive');
		})
		.jcarouselControl({
			target: '-=1'
		});
		
		$('#jcarouselDemoBox01 .jcarousel-control-next')
		.on('jcarouselcontrol:active', function() {
			$(this).removeClass('inactive');
		})
		.on('jcarouselcontrol:inactive', function() {
			$(this).addClass('inactive');
		})
		.jcarouselControl({
			target: '+=1'
		});
		
		$('#jcarouselDemoBox01 .jcarousel-pagination')
		.on('jcarouselpagination:active', 'a', function() {
			$(this).addClass('active');
		})
		.on('jcarouselpagination:inactive', 'a', function() {
			$(this).removeClass('active');
		})
		.jcarouselPagination();
		
		
		//サムネイルと連動
		var connector = function(itemNavigation, carouselStage) {
			return carouselStage.jcarousel('items').eq(itemNavigation.index());
		};
		var carouselStage      = $('#jcarouselDemoBox02 .carousel-stage').jcarousel();
		var carouselNavigation = $('#jcarouselDemoBox02 .carousel-navigation').jcarousel();
		
		carouselNavigation.jcarousel('items').each(function() {
        	var item = $(this);
        	var target = connector(item, carouselStage);
		item
		.on('jcarouselcontrol:active', function() {
			carouselNavigation.jcarousel('scrollIntoView', this);
			item.addClass('active');
		})
			.on('jcarouselcontrol:inactive', function() {
				item.removeClass('active');
			})
			.jcarouselControl({
				target: target,
				carousel: carouselStage
			});
		});
			
		$('#jcarouselDemoBox02 .prev-stage')
		.on('jcarouselcontrol:inactive', function() {
			$(this).addClass('inactive');
		})
		.on('jcarouselcontrol:active', function() {
			$(this).removeClass('inactive');
		})
		.jcarouselControl({
			target: '-=1'
		});
		
		$('#jcarouselDemoBox02 .next-stage')
		.on('jcarouselcontrol:inactive', function() {
			$(this).addClass('inactive');
		})
		.on('jcarouselcontrol:active', function() {
			$(this).removeClass('inactive');
		})
		.jcarouselControl({
			target: '+=1'
		});
		
		$('#jcarouselDemoBox02 .prev-navigation')
		.on('jcarouselcontrol:inactive', function() {
			$(this).addClass('inactive');
		})
		.on('jcarouselcontrol:active', function() {
			$(this).removeClass('inactive');
		})
		.jcarouselControl({
			target: '-=1'
		});
		
		$('#jcarouselDemoBox02 .next-navigation')
		.on('jcarouselcontrol:inactive', function() {
			$(this).addClass('inactive');
		})
		.on('jcarouselcontrol:active', function() {
			$(this).removeClass('inactive');
		})
		.jcarouselControl({
			target: '+=1'
		});
		
		
		//アニメーションをCSS3で
		$('#jcarouselDemoBox03 .jcarousel').jcarousel({
			wrap: 'circular',
			transitions: {
				transforms: true,
				transforms3d: true,
				easing:       'ease'
			}
		});
		
		$('#jcarouselDemoBox03 .jcarousel-control-prev').jcarouselControl({
			target: '-=1'
		});
		
		$('#jcarouselDemoBox03 .jcarousel-control-next').jcarouselControl({
			target: '+=1'
		});
	});
</script>
<p class="title">ノーマルタイプ</p>
<div id="jcarouselDemoBox01" class="jcarousel-wrapper">
	<div class="jcarousel">
		<ul>
			<li><img src="<PATH>/img01.jpg" width="400" height="250" alt="img01"></li>
			<li><img src="<PATH>/img04.jpg" width="400" height="250" alt="img02"></li>
			<li><img src="<PATH>/img07.jpg" width="400" height="250" alt="img03"></li>
			<li><img src="<PATH>/img10.jpg" width="400" height="250" alt="img04"></li>
			<li><img src="<PATH>/img13.jpg" width="400" height="250" alt="img05"></li>
			<li><img src="<PATH>/img16.jpg" width="400" height="250" alt="img06"></li>
		</ul>
	</div>
	<a href="#" class="jcarousel-control-prev">‹</a>
	<a href="#" class="jcarousel-control-next">›</a>
	
	<p class="jcarousel-pagination">
		
	</p>
</div>

<p class="title">サムネイルと連動</p>
<div id="jcarouselDemoBox02" class="connected-carousels">
	<div class="stage">
		<div class="carousel carousel-stage">
			<ul>
				<li><img src="<PATH>/img02.jpg" width="400" height="250" alt="img07"></li>
				<li><img src="<PATH>/img05.jpg" width="400" height="250" alt="img08"></li>
				<li><img src="<PATH>/img08.jpg" width="400" height="250" alt="img09"></li>
				<li><img src="<PATH>/img11.jpg" width="400" height="250" alt="img10"></li>
				<li><img src="<PATH>/img14.jpg" width="400" height="250" alt="img11"></li>
				<li><img src="<PATH>/img17.jpg" width="400" height="250" alt="img12"></li>
			</ul>
		</div>
		<a href="#" class="prev prev-stage"><span>‹</span></a>
		<a href="#" class="next next-stage"><span>›</span></a>
	</div>
	
	<div class="navigation">
		<a href="#" class="prev prev-navigation">‹</a>
		<a href="#" class="next next-navigation">›</a>
		<div class="carousel carousel-navigation">
			<ul>
				<li><img src="<PATH>/img02.jpg" width="50" alt="img07"></li>
				<li><img src="<PATH>/img05.jpg" width="50" alt="img08"></li>
				<li><img src="<PATH>/img08.jpg" width="50" alt="img09"></li>
				<li><img src="<PATH>/img11.jpg" width="50" alt="img10"></li>
				<li><img src="<PATH>/img14.jpg" width="50" alt="img11"></li>
				<li><img src="<PATH>/img17.jpg" width="50" alt="img12"></li>
			</ul>
		</div>
	</div>
</div>


<p class="title">アニメーションをCSS3で</p>
<div id="jcarouselDemoBox03" class="jcarousel-wrapper">
	<div class="jcarousel">
		<ul>
			<li style=background:url([tempd]/images/jquery-plugin/img03.jpg);></li>
			<li style=background:url([tempd]/images/jquery-plugin/img06.jpg);></li>
			<li style=background:url([tempd]/images/jquery-plugin/img09.jpg);></li>
			<li style=background:url([tempd]/images/jquery-plugin/img12.jpg);></li>
			<li style=background:url([tempd]/images/jquery-plugin/img15.jpg);></li>
			<li style=background:url([tempd]/images/jquery-plugin/img18.jpg);></li>
		</ul>
	</div>
	
	<a href="#" class="jcarousel-control-prev">‹</a>
	<a href="#" class="jcarousel-control-next">›</a>
	
	<p class="jcarousel-pagination"></p>
</div>

jcarouselについて

jcarouselは、カスタマイズ性のあるカルーセルを設置できるプラグインです。
オプションやAPIも用意されているので、自分好みにカスタマイズもOK!
IE8+でanimateでのスライドは動きますが、css3のtransitionを使ったアニメーションはIE10+になります。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • FOTORAMA

    FOTORAMA

    フルスクリーンの切り替えができたりするスライダー

  • Camera

    Camera

    足りないものはないんじゃないかというぐらい高機能なスライダー

  • FlexSlider

    FlexSlider

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

  • NivoSlider

    NivoSlider

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

  • MOVINGBOXES

    MOVINGBOXES

    ECサイトの商品ディスプレイ向き