slideinslide

• download v1.3 zip
• jquery.slideinslide.js
• jquery.slideinslide.min.js
• DEMO (horizontal)
• Home

Implementation

<!-- jquery-1.7以降で動作 -->
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.slideinslide.js"></script>

jQuery

$(function(){
	$('#slideBd').slideinslide();
});

HTML

<div id="slideBd">
	<div><div class="slide">slide1-1</div>slide1-2</div>slide1-3</div></div>
	<div><div class="slide">slide2-1</div>slide2-2</div>
	<div><div class="slide">slide3-1</div>
</div>

jQuery

$(function(){
	$('#slideBd').slideinslide({
        intval   : 3000,
        speed    : 1000,
        ease     : 'swing',
        auto     : false,
        captions : true,
        vertical : true
	});
});

slide1-2

CSS Decoration

<link rel="stylesheet" href="css/decoration.css"/>
			

Options

$('#slideBd').slideinslide({
	auto         : false,
	intval       : 3000,
	speed        : 1000,
	ease         : 'swing',
	captions     : true,
	key          : true,
	prev         : 'prev',
	next         : 'next',
	slideprev    : 'slideprev',
	slidenext    : 'slidenext',
	slidestop    : 'slidestop',
	vertical     : false
});
			

Options.2

$('#slideBd').slideinslide({
	//自動再生のON/OFF
	auto         : false,
	//自動再生時のスライドのタイミング
	intval       : 3000,
	//スライドのスピードを指定
	speed        : 1000,
	//アニメーションのイージングの設定
	ease         : 'swing',
	//キャプションの設定
	captions     : true,
	//矢印キーによる操作の設定
	key          : true,
	//次へのテキストを変更する場合に使用（HTML可）
	prev         : 'prev',
	//前へのテキストを変更する場合に使用（HTML可）
	next         : 'next',
	//前のスライダーへのテキストを変更する場合に使用（HTML可）
	slideprev    : 'slideprev',
	//次のスライダーへのテキストを変更する場合に使用（HTML可）
	slidenext    : 'slidenext',
	//自動再生停止のテキストを変更する場合に使用（HTML可）
	slidestop    : 'slidestop',
	//水平方向にスライドさせる
	vertical     : false
});
			

CSS Decoration

/* setting */
.slide{width: 840px; height: 560px;}
body,html{height: 100%; width: 100%; overflow-x: hidden;}

/* decoration control */
#slideArea{background: #000}
.slide{color: #ccc; background: #000;}
.slide a{color: #fff;}
.caption a{color:#ccc;}
.slideall{position:absolute; top:50%; margin-top:-30px; display:block; height:60px; width:50px; text-indent:-9999px;}
.nextall{background: url("../images/next.png") no-repeat; right: 0px;}
.prevall{background: url("../images/prev.png") no-repeat; left: 0px;}
.spannext{background: url("../images/next.png") no-repeat; right: 0px;}
.spanprev{background: url("../images/prev.png") no-repeat; left: 0px;}
.slidebtn {text-indent: -9999px; width: 29px; height: 29px; display: block; float: left; position: relative;}
.vertical {text-indent: -9999px; width: 29px; height: 29px; display: block; float: left; position: absolute; top: 0; }
.prev{background: url("../images/control.png") no-repeat left top;}
.next{background: url("../images/control.png") no-repeat right top;}
.vtprev{background: url("../images/control.png") no-repeat left bottom; left: 0px;}
.vtnext{background: url("../images/control.png") no-repeat right bottom; left: 29px;}
.startautoplay {width: 29px; height: 29px; top: 10px; right: 10px; margin: 0px; }
.startautoplay{background: url("../images/playbtn.png") bottom left no-repeat;}
.stopautoplay{background: url("../images/playbtn.png") top left no-repeat;}
			

Browser

Credit