2012/06/07
スマートフォン対応の画像スライダー「flexslider」
最近webサイトを制作する際、スマフォ対応が求められており、
その方法としてレスポンシブwebデザインといった手法があります。
その際に、使えるjQueryプラグインを紹介します。
flexsliderという画像スライダーのプラグインです。
サイトのメインイメージで使える代物で、
windowの幅に合わせ、画像を縮小してくれます。
このプラグインでできることは、
・スライドショーが、フェイドかスライド（横移動か縦移動）の設定ができ、計３パターンから選択できる
・自動、手動でスライドショーが可能
・前へ、次へ、スライドの操作を簡単に設置できる
・スライドショーをループさせることができる
等々です。
デモを作成したので、以下からご覧下さい。
ウィンドウの横幅を縮めてみると、
画像の幅が縮小されるかと思います。
（サイト自体もレスポンシブになっています。そこまでしっかりやっていないですがww）
flexsliderの使い方
まずは、head部分に以下を記述します。
|
1 2 3 | <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="jquery.flexslider.js"></script> |
flexslider.cssは自分好みに修正することが可能です。
そして、上記の下に、
|
1 2 3 4 5 | <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider(); }); </script> |
を記述します。
HTMLは、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg" /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> </ul> </div> |
ul,liタグで囲みます。
デモでは以下のようなソースになっています。
オプションの解説もしているのでご覧下さい。
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <link rel="stylesheet" href="css/flexslider.css" > <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jquery.flexslider-min.js"></script> <script type="text/javascript"> $("document").ready(function(){ $('.flexslider').flexslider({ animation: "slide", //"fade"か"slide"を選択 slideDirection: "horizontal", //"horizontal"で横移動、"vertical"で縦移動 slideshow: true, //trueで自動でスライドショーに slideshowSpeed: 3000, //スライドショーの間隔 animationDuration: 500, //アニメーションのスピード directionNav: true, //trueで前へ、次へを表示 controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage keyboardNav: true, //trueでキーボードの右、左で操作できるように mousewheel: false, //trueでマウスホイールで前に戻ることができるように prevText: "前へ", //前に戻るボタンのテキストを指定 nextText: "次へ", //次に進むボタンのテキストを指定 pausePlay: false, //trueで停止ボタンを表示 pauseText: 'Pause', //停止ボタンのテキストを指定 playText: 'Play', //停止ボタンを押した後のテキストを指定 randomize: true, //スライドをランダムに並び替えて表示 slideToStart: 0, //最初のスライドを指定(0で一番目のスライド) animationLoop: false, //trueでスライドをループさせる pauseOnAction: false, //？？ pauseOnHover: true, //trueでマウスオーバーでスライドを停止に設定 controlsContainer: ".flex-container", //要素を指定すると、その直下にナビゲーション、コントロールの表示される、指定しないとこの場合.flexsliderとなる manualControls: "", //スライドの数になるセレクタを指定とのことだが、省略で問題なし start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation after: function(){}, //Callback: function(slider) - Fires after each slider animation completes end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous) }); }); </script> |
css
flexslider.cssを修正したものになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | #mainVisual { background: -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 70%, #d5d5d5 80%, #cacaca 80%, #eeeeee 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(70%,#e3e3e3), color-stop(80%,#d5d5d5), color-stop(80%,#cacaca), color-stop(100%,#eeeeee)); background-color: #DDDDDD; width: 100%; text-align: center; border-bottom: 2px solid #555555; margin-bottom: 20px; padding: 20px 0 40px; } .flex-container { max-width: 900px; margin: 0 auto; } /* * jQuery FlexSlider v1.8 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {margin: 0 auto; padding: 0; width: 100%; max-width: 900px;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* 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: 1px 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%; margin: 0; 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: 18px;} /* Direction Nav */ .flex-direction-nav { height: 0; } .flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em;} .flex-direction-nav li .next {background-position: -52px 0; right: -18px;} .flex-direction-nav li .prev {left: -17px;} .flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;} /* Control Nav */ .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; cursor: pointer; text-indent: -999em;} .flex-control-nav li a:hover {background-position: 0 -13px;} .flex-control-nav li a.active {background-position: 0 -26px; cursor: default;} |
html
|
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="mainVisual"> <div class="flex-container"> <div class="flexslider"> <ul class="slides"> <li><img src="photo1.jpg" alt="" /></li> <li><img src="photo2.jpg" alt="" /></li> <li><img src="photo3.jpg" alt="" /></li> <li><img src="photo4.jpg" alt="" /></li> </ul> </div> </div> </div> |
flex-containerで囲んでいるのは、
ナビゲーションやコントロールがデフォルトだと、
flexsliderを親要素として配置されるので、
flexsliderにoverflow:hidden;がかかっていると表示が切れちゃうためです。
ナビゲーションをなくすか、スライドの枠ないに収めるなら、
flex-containerは必要ありません。
liタグで囲むので、画像だけでなく、
コンテンツを入れることが可能だと思います。
ただ、レスポンシブになっているので、
テキストなんかは、調節が必要になってくると思います。
こういったスマフォに対応したプラグインが最近よく出てきていますね。
フリックもできたらなおよかったんですけどね。
いいのがあればまた紹介したいと思います。
Author Profile
スターフィールド編集部
SHARE
