レスポンシブなコンテンツスライダー「FLEXSLIDER」jQueryプラグインの使い方とサンプル

FLEXSLIDERは、レスポンシブなコンテンツスライダーjQueryプラグインです。オプションの指定で縦方向へのスライドやマウスホイールでスライドするようにもできます。

オプションが沢山用意されているので、色々な表示の仕方ができそうです。ブラウザはSafari 4、Chromeの4 +、Firefox 3.6 +、Operaは10 +、IE7 +。 iOSとAndroidデバイスがサポートされているようです。

IE6で表示確認しようとしたら永遠に読み込みが終わらなくて、エラーで終了という形になりました。IE6だとページが全く見れなくなってしまうようです。(Adobe BrowserLabとIETSTERで確認しました。)

サンプル」も作ってみました。

jQueryプラグイン-FLEXSLIDER

ダウンロードとデモ

デモとダウンロード→FlexSlider – The Best Responsive jQuery Slider
ダウンロードできるファイルにデモファイルも入っています。

使い方

ヘッダー内でjQuery本体とプラグインを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

続けてヘッダー内で下記を記入します。

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
    //↑画像スライドのリストを包む親ボックスを指定
  });
</script>

bodyは下記のようにリスト形式で記入します。キャプションを付ける場合はli要素の中にp要素で文字を入れます。

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
      <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

これで画像をフェードして切り替えるスライダーが設置できます。あとはCSSで見た目を整えます。ダウンロードファイルに含まれているデモのCSSが参考になります。

主なオプション

オプションは沢山用意されているようですが、主に使いそうなオプションです。

animation:   
// "slide"を指定するとカルーセルスライド("fade" or "slide")
slideDirection: "horizontal",   
//verticalを指定すると縦方向へスライドする( "horizontal" or "vertical" )
slideshow: true,   
 //falseでオートスライドをなし
slideshowSpeed: 7000, 
//スライドのスピード
animationDuration: 600,         
//アニメーションのスピード
directionNav: true,             
//falseで次へと前へのナビゲーションをなし
controlNav: true,               
//falseで下のコントロールボタンをなし
keyboardNav: true,              
//falseでキーボードで画像をおくれなくなる
animationLoop: true,            
//falseで画像の繰り返し表示をなし
slideToStart: 0,
//最初に見せる画像を指定
mousewheel: false,              
//trueでマウスホイールで画像を送れる
randomize: false,              
//trueで画像表示の順番をランダムにする

作ってみたサンプル

作ってみたサンプルのデモ→flexslider | memocarilogdemo

サンプルのヘッド部分

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider-min.js"></script>
	<script type="text/javascript">
		$(window).load(function() {
			$('.flexslider').flexslider({
			slideshowSpeed: 5000,
			mousewheel: true,  
	});	
		});
	</script>

サンプルのbody部分

<body>
<div id="container">
<h1>flexslider | memocarilogdemo</h1>
<div class="flexslider">
  <ul class="slides">
	<li>
     <img src="images/photos1.png" alt="" />
     <p class="flex-caption">Captions1.</p>
   	</li>
	<li>
	  <img src="images/photos2.png" alt="" />
	  <p class="flex-caption">Captions2.</p>
	</li>
	<li>
      <img src="images/photos3.png" alt="" />
	</li>
	<li>
      <img src="images/photos4.png" alt"" />
	</li>
  </ul>
</div>
</div><!--container-->
<p id="link"><a href="https://memocarilog.info/jquery/3582">元のページへ戻る</a></p>
</body>

サンプルのcss部分。(ダウンロードしたサンプルの画像等を変えただけです。)

* { margin: 0; padding: 0; }
#container{padding-top: 10px;}
h1,p{	min-width: 400px; 
	width: 100%;
	padding:20px 0;
	color: #ccc;
	text-align: center;
}
a{	color: #333;}
.flexslider{
margin: 0 auto;
max-width: 640px;
}
/* Browser Resets */
.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 
/* FlexSlider Necessary Styles
*********************************/ 
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme
*********************************/
.flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}
/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 16px;}
/* 横の次へ前へのナビゲーション */
.flex-direction-nav li a {width: 45px; height: 45px;  display: block;position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li .next {background-position: -52px 0; right: -5px; background: url(images/arrow_right.png) no-repeat 0 0; }
.flex-direction-nav li .prev {left: 5px; background: url(images/arrow_left.png) no-repeat 0 0; }
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
/* 下のナビゲーション */
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(images/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
#link{ padding-top: 40px; }

Related Article

3 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル コンテンツ Facebook 素材 php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ