jQuery設置簡単スライドショー

taka_2015
|
2015年6月1日
| コメントはまだありません
| JavaScript

jQueryと便利プラグインを使用して、誰でも簡単に立派なスライドアニメーション設置を紹介します。

導入しているソースにつきまして、自動的に画像がスライドが再生されます。
また、画像内の進む画像をクリックしても一定時間で自動再生します。

プラグイン「bxslider」の公式サイトにてダウンロードする事ができます。
使用したのは、bxsliderファイル内のjquery.bxslider.min.jsとjquery.bxslider.cssです。

↓以下が実際のソースサンプルです。

▼JavaScript

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script>
jQuery(function(){
var slider = $('#slider1').bxSlider({
	auto:true,
	speed:500,
	pause:3000,
	mode: 'horizontal', 
	prevText: '<', 
	nextText: '>', 
	pager: true, 
	onSlideAfter: function () { slider.startAuto(); }
});

});

▼CSS

<pre class="lang:css decode:true " title="CSS" >
<link rel="stylesheet" href="css/jquery.bxslider.css">
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#wrapper {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
}
</style>

▼HTML

</head>

<body>
<div id="wrapper">

<h2>スライドデモ</h2>
<div id="slider1">
      <div><img src="images/img001.jpg"  alt="スライドサンプル画像01"></div>
      <div><img src="images/img002.jpg"  alt="スライドサンプル画像02"></div>
      <div><img src="images/img003.jpg"  alt="スライドサンプル画像03"></div> 
      <div><img src="images/img004.jpg"  alt="スライドサンプル画像04"></div>
      <div><img src="images/img005.jpg"  alt="スライドサンプル画像05"></div>	
</div>

</div>
</body>
</html>

今回、参考にさせていただいたのは、
『Web 制作における個人的メモ – Web Design Leaves』さんです。
ありがとうございます。

デモページは、こちら

JavaScript