今日の人気記事

  1. レスポンシブな画像ポップアップ Lightbox「Magnific Popup」
  2. デジタル時計のような数値をSVGで「sevenSeg.js」
  3. 画像のドラッグを実装「JQ Image Drag」
  4. 「ページトップへ戻る」を実装 - さまざまなオプション付き「GoUp!」 - jQueryプラグイン
  5. 簡単実装!シンプルなアコーディオンメニュー「Accordion」

タイトルの画像スライダーにおすすめ「Slider」

スポンサーリンク

タイトルの画像スライダーにおすすめなプラグイン「Slider」を紹介します。

jQueryプラグイン「Slider」

このプラグインを使えば、シンプル構成の画像スライダーを簡単に実装することができます。

この画像スライダーはあらかじめ用意した画像をフェードイン・フェードアウトさせるという構成になっており、オプションでは画像スライドの速度や停止している時間などを設定することができます。

スポンサーリンク

それでは、デモページで画像スライダーの挙動を確認してみてください。

「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>
スポンサーリンク

関連記事(一部広告含む)