スライドショーを完成させたい。
①右方向には右ボタンを押すと移動、左方向には左ボタン押すと移動。
②右端にいる状態で右ボタンを押すと最初の位置に戻り、 左端にいる状態で左ボタンを押すと最後の位置に移動するのをやりたいのですが、②ができません。prevの方はできるのですが、nextの方ができずに困っています。ご指導ください。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>jQuery</title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="../../common/css/base.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="wrapper">
<div class="slider-wrap">
<div class="slider-area">
<ul class="slider-list clearfix">
<li><img src="./img/1.jpg"></li>
<li><img src="./img/2.jpg"></li>
<li><img src="./img/3.jpg"></li>
<li><img src="./img/4.jpg"></li>
</ul>
<button type="button" class="slider-ctrl-btn is-prev" data-ctrl="prev"></button>
<button type="button" class="slider-ctrl-btn is-next" data-ctrl="next"></button>
</div>
</div>
</div>
<script src="../../common/js/jquery.js"></script>
<script>
$(function() {
var slideWidth = $('.slider-list').children('li').width();
var slideNum = $('.slider-list').children('li').length;
var now = 0;
$('.slider-ctrl-btn').on('click',function() {
var nextorprev = $(this).data('ctrl');
if(now < 1) {
now = 4;
} else if(now > 3) {
now = 0;
};
if('next' == nextorprev) {
now++;
$('.slider-list').stop().animate( {
left: -slideWidth * now
});
} else if('prev'== nextorprev) {
now--;
$('.slider-list').stop().animate( {
left: slideWidth * now * -1
});
}
console.log(now);
});
});
// .animate({}) cssのプロパティを一定時間かけて変化させてます。
// .data() 要素のdata属性を取得してます。
// .width() 要素の幅を取得してます。
// .length 要素の個数を取得してます。
</script>
</body>
</html>
.clearfix:after {
display: block;
clear: both;
content: '';
}
.wrapper {
padding: 20px;
}
.slider-wrap {
padding: 10px;
margin: 0 auto;
width: 620px;
border-radius: 0px;
background-color: #fff;
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
}
.slider-area {
position: relative;
width: 600px;
height: 300px;
background-color: #FFF;
overflow: hidden;
}
.slider-list {
position: absolute;
top: 0;
left: 0;
width: 2400px;
height: 300px;
}
.slider-list > li { float: left; }
.slider-ctrl-btn {
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 30px;
border-radius: 15px;
background-color: rgba(255, 255, 255, .8);
cursor: pointer;
}
.slider-ctrl-btn.is-prev { left: 20px; }
.slider-ctrl-btn.is-next { right: 20px; }