タイトルの画像スライダーにおすすめ「Slider」
当ページのリンクには広告が含まれています。
スポンサーリンク
タイトルの画像スライダーにおすすめなプラグイン「Slider」を紹介します。
jQueryプラグイン「Slider」
このプラグインを使えば、シンプル構成の画像スライダーを簡単に実装することができます。
この画像スライダーはあらかじめ用意した画像をフェードイン・フェードアウトさせるという構成になっており、オプションでは画像スライドの速度や停止している時間などを設定することができます。
スポンサーリンク
それでは、デモページで画像スライダーの挙動を確認してみてください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Editable Listviewのデモでーす。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Editable Listview - jQueryプラグイン</title>
<link rel="stylesheet" type="text/css" href="slider-mn.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="slider-mn-min.js"></script>
</head>
<body>
<div id="sliderDemo" style="width:100%; margin:0 auto;float:left">
<div class="slider" style="overflow:hidden;position:relative;margin:0 auto;">
<div class="slider_wrapper">
<img src="images/red.png" class="slider_image"/>
</div>
<div class="slider_wrapper">
<img src="images/orange.png" class="slider_image"/>
</div>
<div class="slider_wrapper">
<img src="images/yellow.png" class="slider_image"/>
</div>
<div class="slider_wrapper">
<img src="images/purple.png" class="slider_image"/>
</div>
</div>
</div>
<script>
$(function(){
$(".slider").sliderMn({
slideDuration: 5000,
nextSlideDuration: 1000,
showDescriptionText:true
});
});
</script>
</body>
</html>
スポンサーリンク