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

Tweet

238

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のオプションを指定することでキャプション表示が可能になります

Tweet

短縮URL:

2013年10月09日 WEB制作系 bxSliderjQueryスライド