DEMO bxslider

bxsliderのデモ

bxsliderの記事はこちら

  • o_004_s
  • o_006_s
  • o_015_s
  • o_037_s

JS(ヘッダー)

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

JS(オプション)

<script>
$(document).ready(function(){
	$('.slider').bxSlider({
  	mode: 'fade', //スライド時のアニメーション
  	captions: true, //キャプションを表示する
  	auto: true, //自動再生
	});
});
</script>

html

<ul class="slider">
	<li><img title="シーサー" src="o_004_s.jpg" alt="o_004_s" width="450" height="300" /></li>
	<li><img title="沖縄の小径" src="o_006_s.jpg" alt="o_006_s" width="450" height="300" /></li>
	<li><img title="沖縄の海辺" src="o_015_s.jpg" alt="o_015_s" width="450" height="300" /></li>
	<li><img title="やどかり" src="o_037_s.jpg" alt="o_037_s" width="450" height="300" /></li>
</ul>

シェアする

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

フォローする