jQuery スライダー bxSlider
jQuery
<div class="wrapper-slide">
<div class="slide">
<ul class="container">
<li class="current"><img src="(画像1)" width=～ height=～ /></li>
<li><img src="(画像2)" width=～ height=～ /></li>
<li><img src="(画像3)" width=～ height=～ /></li>
</ul>
<a href="#" class="prev">前の画像</a>
<a href="#" class="next">次の画像</a>
</div>
</div>
<style>
/* スライドショー全体のスタイル */
.slide {
position: relative;
margin: 0 auto;
max-width: 198px;
font-size: 0; /* 画像下の隙間を埋めるため */
}
.slide img {
max-width: 100%;
}
.slide > .container {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
/* 写真の配置 */
.slide > .container > li {
position: absolute;
z-index: 0;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s linear;
}
.slide > .container > li.current {
position: relative;
z-index: 1;
opacity: 1;
}
/* スライドショーのボタン */
.slide a.prev,
.slide a.next {
position: absolute;
display: block;
top: 45%;
width: 40px;
height: 40px;
text-indent: -5000px;
z-index: 10; /* ボタンを常に画像より上に配置 */
}
.slide a.prev {
background: url(矢印画像左1) 50% 50% no-repeat;
left: 0;
}
.slide a.prev:hover {
background: url(矢印画像左2) 50% 50% no-repeat;
}
.slide a.prev:active {
background: url(矢印画像左3) 50% 50% no-repeat;
}
.slide a.next {
background: url(矢印画像右1) 50% 50% no-repeat;
right: 0;
}
.slide a.next:hover {
background: url(矢印画像右2) 50% 50% no-repeat;
}
.slide a.next:active {
background: url(矢印画像右3) 50% 50% no-repeat;
}
/**
* RESPONSIVE: スマートフォン向けウィンドウ幅600px以下
*/
@media screen and (max-width:600px) {
.slide a.prev,
.slide a.next {
top: 40%;
}
}
</style>
<script>
$(function(){
var intervalId;
setTimer();
function setTimer(){
intervalId = setInterval(autoClick, 10000);
}
function autoClick(){
$(‘.slide’).children(‘a.next’).click();
}
function changeImage($click){
//console.log($click);
var $current;
var findSelector = ”;
var $new;
$current = $click.siblings(‘.container’).children(‘.current’);
if($click.hasClass(‘next’)){
$new = $current.next();
findSelector = ‘:first-child’;
} else {
$new = $current.prev();
findSelector = ‘:last-child’;
}
if($new.length == 0) {
$new = $current.siblings(findSelector);
}
$current.removeClass(‘current’);
$new.addClass(‘current’);
setTimer();
}
$(‘.slide’)
.on(‘click’, ‘> a’, function(event){
event.preventDefault();
clearInterval(intervalId);
changeImage($(this));
});
});
</script>
jQueryプラグイン
プラグイン：bxSlider設定
http://bxslider.com/
からダウンロード、解凍してフォルダごと参照設定
例
jquery.bxslider
└jquery.bxslider.js
└jquery.bxslider.css
└images
└plugins
test.html
※test.html
<script src="http://code.jquery.com/jquery-1.10.1.min.js"
integrity="sha256-SDf34fFWX/ZnUozXXEH0AeB+Ip3hvRsjLwp6QNTEb3k="
crossorigin="anonymous"></script>
※jQueryのバージョンによっては動かないらしい
<script src="./jquery.bxslider/jquery.bxslider.js"></script>
<link rel="stylesheet" href="./jquery.bxslider/jquery.bxslider.css">
標準
<ul class="bxslider">
<li><img src="画像1" width=～ height=～ /></li>
<li><img src="画像2" width=～ height=～ /></li>
<li><img src="画像3" width=～ height=～ /></li>
</ul>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
オプション
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true, 自動再生
speed: 1000, スライド速度
pause: 4000, スライド間の停止時間
mode: 'horizontal', 横スライド
mode: 'vertical', 縦スライド
mode: 'fade', フェードイン
pager: 'false', ●〇ボタン
controls: 'false' ←→ボタン
});
});
</script>
