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 ウェブデザインギャラリー