bxSlider で画像のtitleの内容をキャプションにする

bxslider
このエントリーをはてなブックマークに追加
PR

slideをWebサイトに実装するjQueryのプラグインですが
表示した画像に、その画像が持つtitleをキャプションとして表示することが可能です

http://bxslider.com/

 

bxSlideを使ってスライドの画像にキャプションを表示する

まず、bxSliderの基本的な設置

head部分にjqueryとbxsliderのファイルを読み込むコートを記入します

<link rel="stylesheet" type="text/css" href="bxslider/jquery.bxslider.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bxslider/jquery.bxslider.js"></script>

 

 

次にスライドにする対象に クラスを付けます(bxslider)

<ul class="bxslider">
<li><img src="Chrysanthemum.jpg" alt="" title="title1"></li>
<li><img src="Desert.jpg" alt="" title="タイトル2"></li>
<li><img src="Hydrangeas.jpg" alt="" title="タイトル3"></li>
</ul>

 

 

最後にbodyの終了タグ前にスクリプトを記入します

<script>
$('.bxslider').bxSlider({
    slideWidth:500,
    slideHeight:375,
    captions:true
});
</script>

 

このときにcaptionsのオプションを指定することでキャプション表示が可能になります

DEMO 表示

 

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)