jQueryのスライドショー
Q&A
Closed
解決したいこと
jQueryの勉強をしています。
課題として、jQueryでスライドショーを作ることになったのですが、3時間格闘しているので質問させてください。
ボタンを押すとスライドする仕組みなのですが、1回目はスライドできます。
ただ2回目にスライドができなくなってしまいます。
なぜできないのかを教えて頂きたいです。
https://qiita.com/pizzzza-planet/items/a6eca4abf9f93409b7bc
こちらの記事を参考にしています。
右端にいる状態で .next を押すと最初の位置に戻り、左端にいる状態で .prev を押すと最後の位置に移動する。
これもしたいのですが上手くいきません。
該当するソースコード
<div class="slider-wrap">
<div class="slider-area">
<ul class="slider-list clearfix">
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
</ul>
<button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button>
<button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button>
</div>
</div>
<script defer>
window.addEventListener( 'load', function(){
$(".slider-ctrl-btn").click(function () {
let pages = [];
let numCount = $('.slider-list li').length;
let num = 0;
let pagesNum = 0;
for(let i = 0; i < numCount; i++){
if (i == 0) {
pages.push(0);
} else {
num += - $('.slider-list li').eq(i).width();
pages.push(num);
}
}
if ($(this).data('ctrl') === 'next') {
let step = 1;
pagesNum = pagesNum + step;
if (pagesNum === pages.length) {
pagesNum = 0;
}
$(".slider-list").animate({left: pages[pagesNum]})
} else if ($(this).data('ctrl') === 'prev') {
let back = -1;
pagesNum = pagesNum + back;
if (pagesNum === -1) {
pagesNum = pages.length - 1;
}
$(".slider-list").animate({left: pages[pagesNum]})
}
});
}, false);
</script>
CSS
.slider-wrap {
width: 600px;
padding: 10px;
margin: 0 auto;
border-radius: 10px;
background-color: #DDD;
box-shadow: 0 2px 5px rgba(50, 50, 50, 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;list-style-type:none; }
.slider-ctrl-btn {
position: absolute;
top: 50%;
width: 30px;
height: 30px;
margin-top: -15px;
cursor: pointer;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.5);
}
.slider-ctrl-btn.prev { left: 30px; }
.slider-ctrl-btn.next { right: 30px; }
.swiper,
.slick {
max-width: 500px;
margin: 30px auto 0;
}
.swiper-button-prev,
.swiper-button-next {
color: rgb(0, 106, 255);
}
.swiper-pagination span {
background-color: #fff;
}
.slick-prev {
left: 25px;
}
.slick-next {
right: 25px;
}
.slick-prev,
.slick-next {
z-index: 100;
}
自分で試したこと
クリックで違う動作になってしまうため、if文がおかしいのかと思い変数を変えたり数字を変えたりしたのですが上手く動作しませんでした。
何卒宜しくお願い致します。
0
