DEMO bxslider

2015-04-262017-10-05

bxsliderのデモ

bxsliderの記事はこちら

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>