bxslider ã¨ã„ã†jQueryプラグインã®ç´¹ä»‹ã§ã™ã€‚
ã“れを使用ã™ã‚‹ã“ã¨ã§ã¨ã¦ã‚‚ç°¡å˜ã«ã„ã‚ã„ã‚ãªã‚¹ãƒ©ã‚¤ãƒ€ãƒ¼ã‚’実ç¾ã™ã‚‹ã“ã¨ãŒã§ãã‚‹ã®ã§ã™ã€‚
ã‚ã¾ã‚ŠjQueryã«è©³ã—ããªã„æ–¹ã§ã‚‚ã€ã“ã‚Œãªã‚‰ç°¡å˜ã«è¨å®šã§ãã¡ã‚ƒã„ã¾ã™ã€‚
是éžãŠè©¦ã—ãã ã•ã„。
ã•ã£ããダウンãƒãƒ¼ãƒ‰ã—ã¦ã¿ã¾ã—ょã†ã€‚
bxslider
å³ä¸Šã®ã€ŒDownloadã€ã‚’クリックã™ã‚‹ã“ã¨ã§å–å¾—ã§ãã¾ã™ã€‚
メニューã®ã€ŒExampleã€ã‚’クリックã™ã‚‹ã“ã¨ã§ä¸€é€šã‚Šã®è¨å®šæ–¹æ³•ã‚’確èªã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚
ã¾ãšã€ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã—ãŸãƒ•ã‚©ãƒ«ãƒ€ã‚’è¨ç½®ã—ã¾ã™ã€‚
ãã—ã¦ã€ã€Œjquery.bxslider.cssã€ã¨ã€Œjquery.bxslider.min.jsã€ã‚’èªè¾¼ã¿ã¾ã™ã€‚
<script src="jquery.bxslider.min.js" type="text/javascript"></script>
<link href="jquery.bxslider.css" rel="stylesheet" type="text/css" media="all" />
ã“ã‚“ãªæ„Ÿã˜ã§ã™ã€‚
次ã«HTMLã§ç”»åƒã‚’表示ã—ã¾ã™ã€‚
ulã®ã‚¯ãƒ©ã‚¹ã«ã€Œbxsliderã€ã‚’è¨å®šã™ã‚‹ã ã‘ã§ã™ã€‚
<ul class="bxslider">
<li><img src="/hill_trees.jpg" /></li>
<li><img src="/me_trees.jpg" /></li>
<li><img src="/houses.jpg" /></li>
</ul>
最後ã«JavaScriptを記述ã—ã¾ã™ã€‚
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
ãŸã£ãŸã“ã‚Œã ã‘ã§ã‚¹ãƒ©ã‚¤ãƒ€ãƒ¼ãŒå®Ÿç¾ã§ãã¾ã™ã€‚
ã‚ã¡ã‚ƒãã¡ã‚ƒç°¡å˜ã§ã™ã‚ˆãï¼
.bxSliderã§ä½¿ç”¨ã§ãるオプションも多ã用æ„ã•ã‚Œã¦ã„ã¾ã™ã€‚
オプション
ã“ã¡ã‚‰ã®ãƒšãƒ¼ã‚¸ã‹ã‚‰ã”確èªãã ã•ã„。