2014.03.15
画像と文字がスライドしたり開閉したりする必見jQueryプラグイン
アニメーション ・ サンプルあり ・ スライドショー ・ プラグインjQueryのプラグインの中でもとてもユニークな動きをするスライドショーのプラグインを紹介します。
数枚の画像などを同時にスライドすることをカルーセルといいますが、今回もカルーセルプラグインの1つです。
CIRCULAR CONTENT CAROUSELというプラグイン。

1.headにjqueryとプラグインを読み込む
jQuery本体
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
プラグイン
<script type="text/javascript" src="ファイルのパス/jquery.easing.1.3.js"></script> <script type="text/javascript" src="ファイルのパス/jquery.mousewheel.js"></script> <script type="text/javascript" src="ファイルのパス/jquery.contentcarousel.js"></script>
今回メインのプラグインは一番最後のcontentcarouselというプラグインですが、easingとmousewheelのプラグインと共に使っています。
jQueryの読み込む上記の記述は、厳密に言うとheadにでなくても大丈夫です。
2. jQueryソース
bodyタグの直後に記述。
<script type="text/javascript"> $('#ca-container').contentcarousel(); </script>
jQuery本体とプラグインをheadに記述していない場合は、このjQueryのソースの記述場所に気を付けましょう。
プラグインよりも後に記述しないと動かないので注意が必要です。
3.CSSのソース
body { background:#373737; } .ca-container{ position:relative; margin:25px auto 20px auto; width:900px; height:400px; } .ca-wrapper{ width:100%; height:100%; position:relative; } .ca-item{ position:relative; float:left; width:303px; height:100%; text-align:center; } .ca-more{ position: absolute; bottom: 10px; right:0px; padding:4px 15px; font-weight:bold; background: #7ac9e3; text-align:center; color: #fff; font-family: "Georgia","Times New Roman",serif; font-style:italic; text-shadow:1px 1px 1px #000; } .ca-close{ position:absolute; top:10px; right:10px; background:#fff url(画像のパス/cross.png) no-repeat center center; width:27px; height:27px; text-indent:-9000px; outline:none; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2); box-shadow:1px 1px 2px rgba(0,0,0,0.2); opacity:0.7; } .ca-close:hover{ opacity:1.0; } .ca-item-main{ padding:10px; position:absolute; top:5px; left:1px; right:15px; bottom:5px; background:#262626; overflow:hidden; -moz-box-shadow:0px 0px 3px rgba(0,0,0,1.0),inset 0px 0px 5px rgba(255, 255, 255, 0.2); -webkit-box-shadow:0px 0px 3px rgba(0,0,0,1.0),inset 0px 0px 5px rgba(255, 255, 255, 0.2); box-shadow:0px 0px 3px rgba(0,0,0,1.0),inset 0px 0px 5px rgba(255, 255, 255, 0.2); } .ca-icon{ width:250px; height:140px; position:relative; margin:5px auto; } .ca-item h3{ font-family: "Georgia","Times New Roman",serif; font-style:italic; font-size:24px; color:#fff; margin:10px; text-align:center; text-shadow: 0px 1px 1px #000; } .ca-item .sub { font-size:12px; color:#fff; text-align:center; text-shadow: 0px 1px 1px #000; margin-bottom:20px; display:block; } .ca-item h4{ font-family: "Georgia","Times New Roman",serif; font-style:italic; font-size:12px; text-align:left; border-left:10px solid #7ac9e3; padding-left:10px; line-height:24px; margin:10px; position:relative; } .ca-item h4 span{ display:block; color:#8c8c8c; text-shadow: 0px 1px 1px #000; } .ca-content-wrapper{ background:#464646; position:absolute; width:0px; /* expands to width of the wrapper minus 1 element */ height:390px; top:5px; text-align:left; z-index:10000; overflow:hidden; -moz-box-shadow:0px 0px 3px rgba(0,0,0,1.0),inset 0px 0px 5px rgba(255, 255, 255, 0.3); -webkit-box-shadow:0px 0px 3px rgba(0,0,0,1.0),inset 0px 0px 5px rgba(255, 255, 255, 0.3); box-shadow:0px 0px 3px rgba(0,0,0,1.0),inset 0px 0px 5px rgba(255, 255, 255, 0.3); } .ca-content{ padding:10px 20px 10px 5px; overflow:hidden; } .ca-content-text{ font-size: 12px; margin:10px 20px; padding:10px 20px; line-height:24px; color:#fff; text-shadow: 1px 1px 1px rgba(255,255,255,0.3); } .ca-content-text p{ padding-bottom:5px; } .ca-content h6{ margin:25px 20px 0px 35px; font-size:28px; padding-bottom:5px; font-style: italic; font-family: "Georgia","Times New Roman",serif; color:#fff; border-bottom:2px solid #7ac9e3; text-shadow: 1px 1px 1px #7ac9e3; } .ca-content ul{ margin:20px 35px 20px 0px; height:30px; } .ca-content ul li{ float:left; margin:0px 2px; list-style:none; } .ca-content ul li a{ color:#fff; background: #7ac9e3; padding:3px 6px; font-size:14px; font-family: "Georgia","Times New Roman",serif; font-style:italic; text-shadow:1px 1px 1px rgba(0,0,0,0.8); } .ca-content ul li a:hover{ background:#fff; color:#000; text-shadow:none; } .ca-nav span{ width:25px; height:38px; background:transparent url(画像のパス/arrows.png) no-repeat top left; position:absolute; top:50%; margin-top:-19px; left:-40px; text-indent:-9000px; opacity:0.7; cursor:pointer; z-index:100; } .ca-nav span.ca-nav-next{ background-position:top right; left:auto; right:-40px; } .ca-nav span:hover{ opacity:1.0; }
閉じるボタン、前へ次へのナビボタンは画像を使ってます。
4.HTMLソース
まずは、上記の画像の部分のみのソースです。
これが1つの単位でスライドする仕組み。
<div class="ca-item"> <div class="ca-item-main"> <div class="ca-icon"><img src="http://ri-mode.com/photos/files/2014/02/flower025-250x140.jpg"></div> <h3>Gerbera</h3> <span class="sub">ガーベラ</span> <h4><span>Gerbera is a genus of ornamental plants from the sunflower family (Asteraceae).</span></h4> <a href="#" class="ca-more" title="詳しくはこちら">more...</a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <h6>Innocence, modesty and purity</h6> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p>ガーベラの花言葉は「希望」「辛抱強さ」「神秘」「崇高美」</p> <p>ガーベラ (Gerbera) は、キク科ガーベラ属に属する植物の総称。多年草。別名アフリカセンボンヤリ。温帯な地域および、熱帯アジアやアフリカなどに分布し、野生で約40種が存在する(特に南アフリカが多い)。花のもちが良く、フラワーアレンジメントでも比較的多く用いられる。花色はピンク、赤、白、黄色、緑、オレンジなど豊富にある。発見者であるドイツの自然学者ゲルバー(de:Traugott Gerber)の名前からとられた。</p> </div> <ul> <li><a href="#" title="もっと読む">Read more</a></li> <li><a href="#" title="シェアする">Share this</a></li> <li><a href="#" title="会員になる">Become a member</a></li> <li><a href="#" title="寄付する">Donate</a></li> </ul> </div> </div>
今回のサンプルでは5個の画像とその文章をスライドさせているので、単純に言ってしまうと上記のソースを5回コピペして、画像と文章等のみ変更している、という状態です。
ソースが長くなるので省略しますが、以下のようにしてみてください。
<div id="ca-container" class="ca-container"> <div class="ca-wrapper"> 上記のHTMLを5回コピペして画像と文字を変更 </div> </div>
5. プラグインソース変更
今回はCSSを若干カスタマイズしたので、最初に読み込んだjquery.contentcarousel.jsの中のソースを2か所だけ変更しました。
54行目と80行目を変更しています。
変更前
width : cache.itemW * 2 + 'px',
変更後
width : cache.itemW * 2 - 10 + 'px',