caption

caption

caption

caption

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

  • files
  • js
  • html
<link href="<PATH>movingboxes.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>jquery.movingboxes.min.js"></script>
<script>
	$(window).load(function(){
		$('#jquery.movingboxes.min').movingBoxes({
			startPanel   : 2,      // start with this panel
			width        : 500,    // overall width of movingBoxes (not including navigation arrows)
			panelWidth   : .8,     // current panel width adjusted to 70% of overall width
			buildNav     : true,
			fixedHeight  : true,// if true, navigation links will be added
		});
	});
</script>


//オプション一覧
startPanel   : 2,         // start with this panel
width        : 800,       // overall width of movingBoxes
panelWidth   : 0.5,       // current panel width adjusted to 50% of overall width
reducedSize  : 0.8,       // non-current panel size: 80% of panel size
fixedHeight  : true,     // if true, slider height set to max panel height; if false, slider height will auto adjust.

// Behaviour
speed        : 500,       // animation time in milliseconds
hashTags     : true,      // if true, hash tags are enabled
wrap         : true,     // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
buildNav     : false,     // if true, navigation links will be added
navFormatter : null,      // function which returns the navigation text for each panel
easing       : 'swing',   // anything other than "linear" or "swing" requires the easing plugin

// Selectors & classes
currentPanel : 'current', // current panel class
tooltipClass : 'tooltip', // added to the navigation, but the title attribute is blank unless the link text-indent is negative

// Callbacks
initialized     : null,   // callback when MovingBoxes has completed initialization
initChange      : null,   // callback upon change panel initialization
beforeAnimation : null,   // callback before any animation occurs
completed       : null    // callback after animation completes
<div id="MOVINGBOXESDemo">
	<div>
		<img src="<PATH>/img01.jpg" alt="" />		
		<p>caption</p>
	</div>
	<div>
		<img src="<PATH>/img03.jpg" alt="" />		
		<p>caption</p>
	</div>
	<div>
		<img src="<PATH>/img05.jpg" alt="" />		
		<p>caption</p>
	</div>
	<div>
		<img src="<PATH>/img06.jpg" alt="" />		
		<p>caption</p>
	</div>
</div>

MOVINGBOXESについて

MOVINGBOXESは、普通のスライダーとは毛色の違うスライダープラグインです。
ECサイトでディスプレイされた商品のスライダーなどに向いてるかもしれません。
ハッシュタグを使うことで、URLで指定の画像を表示させることもできます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスGPL
対応ブラウザ

関連するjQueryプラグイン

  • FOTORAMA

    FOTORAMA

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

  • Swipebox

    Swipebox

    スマホのスワイプに対応した全画面スライダー

  • jcarousel

    jcarousel

    カスタマイズ性のあるカルーセルを設置できる

  • bxSlider

    bxSlider

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

  • AwkwardShowcase

    AwkwardShowcase

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