2013.06.08
jquery

複数の写真を同時にスライドできるjQueryプラグイン

CarouFredSelというとっても素敵なエフェクトのjQueryのプラグインです。
こちらからダウンロードし、すべてのファイルをそのままサーバーにアップロードします。

自動・手動でスライド、上下にスライド、フル画面でスライドなどなど、いろいろなパターンでアレンジできるようですが、今回は以前こちらに書いたポラロイド風のCSSを加え、3パターン作ってみました。

Googleのウェブフォントを使用

HTMLソース
<link href="http://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css">

今回のサンプルは3つ全てGoogleのウェブフォントを使うので、HTMLのheadに下記を記述しています。
Kaushan Scriptというおしゃれなフォントを使っています。

HTMLのheadに読み込むjQueryを記述

HTMLソース
<!-- include jQuery + carouFredSel plugin -->
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>

jquery本体とCarouFredSelのjsファイルを読み込みます。

1. デフォルト

CarouFredSelのデフォルト。

複数の写真を同時にスライドできるjQueryプラグイン

Javascriptソース
<script type="text/javascript" language="javascript">
$(function() {
   $('#foo0').carouFredSel();
});
</script>

上記のjavascriptはhead内か、bodyのすぐ下に記述します。

HTMLには表示したい画像をリストします。

<li><img src="表示したい画像のパス.jpg"/><p>画像のタイトル</p></li>

上記のようにliでいくつでも画像を追加できます。

HTMLソース
<div class="list_carousel">
   <ul id="foo0">
     <li><img src="images/flower016-250x140.jpg" /><p>Hibiscus</p></li>
     <li><img src="images/tree003-250x140.jpg"/><p>A tree &amp; sky</p></li>
     <li><img src="images/flower017-250x140.jpg" /><p>Pink flower</p></li>
     <li><img src="images/panorama004-250x140.jpg"  /><p>Blue sky</p></li>
     <li><img src="images/sea002-250x140.jpg"/><p>The shiny sea</p></li>
   </ul>
<div class="clearfix"></div>
</div>
CSSソース
.list_carousel {
   margin: 0 auto 30px;
   width: 900px;
   padding:0 0 0 10px;
}
.list_carousel ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: block;
}
.list_carousel li {
   font-size: 40px;
   color: #999;
   text-align: center;
   background-color: #eee;
   border: 3px solid #fff;
   border-bottom:35px solid #fff;
   width: 250px;
   height: 140px;
   padding: 0;
   margin:30px 20px;
   display: block;
   float: left;
   -webkit-box-shadow: 1px 1px 3px #808080;
   -moz-box-shadow: 1px 1px 3px #808080;
   box-shadow: 1px 1px 3px #808080;
   position:relative;
}
.clearfix {
   float: none;
   clear: both;
}
li p {
   position: absolute;
   text-align: center;
   width: 100%;
   font-family: 'Kaushan Script', cursive;
   color: #756F61;
   font-size:21px;
   top:120px;
}

2. CSS transitionを使用したタイマー付き

loadingバーみたいなタイマーを表示。
マウスオーバーでタイマーがストップします。

複数の写真を同時にスライドできるjQueryプラグイン

Javascriptソース
<script type="text/javascript" language="javascript">
$(function() {
    $('#foo1').carouFredSel({
          auto: {
          pauseOnHover: 'resume',
          progress: '#timer1'
          }
     }, {
         transition: true
         });
});
</script>
HTMLソース
<div class="list_carousel">
   <ul id="foo1">
     <li><img src="images/flower016-250x140.jpg" /><p>Hibiscus</p></li>
     <li><img src="images/tree003-250x140.jpg"/><p>A tree &amp; sky</p></li>
     <li><img src="images/flower017-250x140.jpg" /><p>Pink flower</p></li>
     <li><img src="images/panorama004-250x140.jpg"  /><p>Blue sky</p></li>
     <li><img src="images/sea002-250x140.jpg"/><p>The shiny sea</p></li>
   </ul>
<div class="clearfix"></div>
<div class="timer_box"><div id="timer1" class="timer"></div></div>
<div class="clearfix"></div>
</div>
CSSソース
.list_carousel {
   margin: 0 auto 30px;
   width: 900px;
   padding:0 0 0 10px;
}
.list_carousel ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: block;
}
.list_carousel li {
   font-size: 40px;
   color: #999;
   text-align: center;
   background-color: #eee;
   border: 3px solid #fff;
   border-bottom:35px solid #fff;
   width: 250px;
   height: 140px;
   padding: 0;
   margin:30px 20px;
   display: block;
   float: left;
   -webkit-box-shadow: 1px 1px 3px #808080;
   -moz-box-shadow: 1px 1px 3px #808080;
   box-shadow: 1px 1px 3px #808080;
   position:relative;
}
.clearfix {
   float: none;
   clear: both;
}
li p {
   position: absolute;
   text-align: center;
   width: 100%;
   font-family: 'Kaushan Script', cursive;
   color: #756F61;
   font-size:21px;
   top:120px;
}
.timer {
   background-color: #999;
   height: 5px;
   width: 0px;
}
.timer_box {
   width:300px;
   height:5px;
   background:#fff;
   padding:2px;
   -webkit-box-shadow: 1px 1px 3px #808080;
   -moz-box-shadow: 1px 1px 3px #808080;
   box-shadow: 1px 1px 3px #808080;
   margin:20px auto 20px;
}

3. ドラッグして左右にスライド

自動でスライドではなく、マウスでドラック。
前へ・次へボタンとページナビ付き。


複数の写真を同時にスライドできるjQueryプラグイン

Headに追加する
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.touchSwipe.min.js"></script>
Javascriptソース
<script type="text/javascript" language="javascript">
$(function() {
    $('#foo2').carouFredSel({
           auto: false,
           prev: '#prev2',
           next: '#next2',
           pagination: "#pager2",
           mousewheel: true,
           swipe: {
               onMouse: true,
               onTouch: true
            }
    });
});
</script>
HTMLソース
<div class="list_carousel">
<ul id="foo2">
    <li><img src="images/flower016-250x140.jpg" /><p>Hibiscus</p></li>
     <li><img src="images/tree003-250x140.jpg"/><p>A tree &amp; sky</p></li>
     <li><img src="images/flower017-250x140.jpg" /><p>Pink flower</p></li>
     <li><img src="images/panorama004-250x140.jpg"  /><p>Blue sky</p></li>
     <li><img src="images/sea002-250x140.jpg"/><p>The shiny sea</p></li>
</ul>

<a id="prev2" class="prev" href="#"><span>&lt;</span></a>
<a id="next2" class="next" href="#"><span>&gt;</span></a>
<div id="pager2" class="pager"></div>
</div>
CSSソース
.list_carousel {
   margin: 0 auto 30px;
   width: 900px;
   padding:0 0 0 10px;
}
.list_carousel ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: block;
}
.list_carousel li {
   font-size: 40px;
   color: #999;
   text-align: center;
   background-color: #eee;
   border: 3px solid #fff;
   border-bottom:35px solid #fff;
   width: 250px;
   height: 140px;
   padding: 0;
   margin:30px 20px;
   display: block;
   float: left;
   -webkit-box-shadow: 1px 1px 3px #808080;
   -moz-box-shadow: 1px 1px 3px #808080;
   box-shadow: 1px 1px 3px #808080;
   position:relative;
}
li p {
   position: absolute;
   text-align: center;
   width: 100%;
   font-family: 'Kaushan Script', cursive;
   color: #756F61;
   font-size:21px;
   top:120px;
}
.prev {
   top:100px;
   left:0;
   position:absolute;
}
a.prev {
   width:32px;
   height:38px;
   -webkit-box-shadow: 1px 1px 3px #808080;
   -moz-box-shadow: 1px 1px 3px #808080;
   box-shadow: 1px 1px 3px #808080;
   background:url(images/left.gif) #999;
}
.next {
   top:100px;
   right:0;
   position:absolute;
}
a.next {
   width:32px;
   height:38px;
   -webkit-box-shadow: 1px 1px 3px #808080;
   -moz-box-shadow: 1px 1px 3px #808080;
   box-shadow: 1px 1px 3px #808080;
   background:url(images/right.gif) #999;
}
a.next span, a.prev span { display:none; }
.pager {
   float: left;
   width: 900px;
   text-align: center;
}
.pager a {
   background: url(images/bullets.png) 0 0 no-repeat transparent;
   width: 15px;
   height: 15px;
   margin: 0 5px 0 0;
   display: inline-block;
}
.pager a.selected {
   background-position: 0 -22px;
   cursor: default;
}
.pager a span { display: none; }

こういったスライダーはあるだけでサイトが引き立ちますね。

関連する記事

コメント & トラックバック
  1. 平野

    サンプル3番をコピーさせて頂いたのですが、まるっきり動きません。
    画像は勿論自身のものを用意しパス等も合っている為画面上に表示等もされています。

    左右の矢印や画像下のセレクトのボタンの画像等は用意してないので仕方ないにしても、全く機能しません。

    .list_carouselや.wrapper等のクラスもhtml上、何処にも見当たりませんし、他にhtml上に記述すべきものがあるのではないですか?
    教えてもらう立場でいうのもなんですが、記述漏れがたくさんあるのではないでしょうか?


    • Ri-mode

      平野さん

      ご指摘ありがとうございます。
      サンプル3番、ソースに一部誤りがありましたのでHTMLとCSS変更しました。


  2. くにちあん

    3。ドラッグして左右にスライドのバージョンで
    サンプルは1行に3列並んでますが、
    これを2行同時に表示させてスライドさせるのは
    どうしたらいいでしょうか?
    よろしくお願いします。


  3. 増田 洋平

    初めまして
    上記のような複数の画像をスライドさせたいのですが、まったくの初心者でわかりません。
    教えていただけませんか?
    どこに何を入れていいのか全く分からなくて。
    よろしくお願いいたします。


    • Ri-mode

      増田 洋平さん

      コメントありがとうございます。
      上記で紹介したソースで基本的には実装できるかと思います。
      どういった点がどうお分かりにならないのかもう少し具体的にお知らせいただけますでしょうか。


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP