jQueryで、スマートな画像スライダー「MobilySlider」

見せ方、UIがスマートな画像スライダーJavaScriptを紹介します。
jQueryプラグインMobilySliderです。
jQueryで、スマートな画像スライダー「MobilySlider」サンプル

使用方法
mobily.pl - playground - MobilySliderからファイル一式をダウンロードします。
<link href="default.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="mobilyslider.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('.class名1').mobilyslider({
content: '.class名2',
children: 'div', //スライド要素
orientation: 'horizontal', //スライド方向horizontal or vertical
animationSpeed: 300, //切替速度
autoplay: true, //自動再生
autoplaySpeed: 3000, //自動再生速度
pauseOnHover: true, //マウスオーバーで止める
bullets: true, //ナビ表示
arrows: true, //矢印表示
prev: 'prev', //前へのclass
next: 'next', //次へのclass
});
});
</script>

上記を記述したら画像を記述していきます。
<div class="class名1">
<div class="class名2">
<div class="item">
<img src="画像パス" />
</div>
</div>
<!-- 以下画像分 -->
</div>

なお、サンプルCSSは800px×350pxの画像をベースとして書かれていますので、自分の環境に応じて変更ください。

jQueryで、スマートな画像スライダー「MobilySlider」サンプル

sponsors

「jQueryで、スマートな画像スライダー「MobilySlider」」をシェアする

記事作成:
記事URL:

TOP > > > jQueryで、スマートな画像スライダー「MobilySlider」