blueberry

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-01-02 (金) 14:55:51

画像を準備するだけで簡単だった♪

【環境】
[jQuery] 1.6.1
DL

公式サイト から DL。
デモも同サイトTOPにある。
 

セッティング
head
  1. <link rel="stylesheet" href="css/blueberry.css" />
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  3. <script src="js/jquery.blueberry.js"></script>

 

body
本体
  1. <div class="blueberry">
  2.     <ul class="slides">
  3.         <li><img src="img/slide1.jpg" /></li>
  4.         <li><img src="img/slide2.jpg" /></li>
  5.         <li><img src="img/slide3.jpg" /></li>
  6.         <li><img src="img/slide4.jpg" /></li>
  7.     </ul>
  8. </div>

上記だけ記載すれば、blueberry 側でオプションを自動でくっつけてくれ
実際のコードは下記のように出力される。

  1. <div class="blueberry">
  2.     <ul class="slides">
  3.         <li><img src="img/slide1.jpg" /></li>
  4.         <li><img src="img/slide2.jpg" /></li>
  5.         <li><img src="img/slide3.jpg" /></li>
  6.         <li><img src="img/slide4.jpg" /></li>
  7.     </ul>
  8. <!-- Optional, see options below -->
  9.     <ul class="pager">
  10.         <li><a href="#"><span></span></a></li>
  11.         <li><a href="#"><span></span></a></li>
  12.         <li><a href="#"><span></span></a></li>
  13.         <li><a href="#"><span></span></a></li>
  14.     </ul>
  15. <!-- Optional, see options below -->
  16. </div>

 

実行
  1. <script>
  2.     $(window).load(function() {
  3.         $('.blueberry').blueberry();
  4.     });    
  5. </script>

 

CSS

スライドショーのサイズは親エレメントに依存するので
下記のような設定は任意。

  1. .blueberry { max-width: 960px; }

 

jquery.blueberry.js
  1. var defaults = {
  2.     interval: 5000,
  3.     duration: 500,
  4.     lineheight: 1,
  5.     height: 'auto', //reserved
  6.     hoverpause: false,
  7.     pager: true,
  8.     nav: true, //reserved
  9.     keynav: true
  10. }

 

参考元サイト

coliss:[JS]実装は簡単、機能は最小限、Responsiveデザイン対応の超シンプルなスライダーのスクリプト -Blueberry

jQuery,Library & PlugIn & AddIn | 2015-01-02 (金) 14:55:51 |

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment