jQueryでカルーセルを作る際に以下のコード(html、css、JavaScript)でプレビューしてみるのですが、左矢印が消える処理は出来ているものの最後のスライドになっても右矢印が消えずに永遠にスライドできてしまいます。
何がいけないのか分かりません。どなたか教えていただけると嬉しいです。分かりやすいコードやコメントが出来ていないとは思いますがよろしくお願いします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript Test</title> 6 <link rel="stylesheet" href="test.css"> 7 </head> 8 <body> 9 <div class="carousel"> 10 <ul class="slides"> 11 <li><div class="box img1"></div></li> 12 <li><div class="box img2"></div></li> 13 <li><div class="box img3"></div></li> 14 <li><div class="box img4"></div></li> 15 </ul> 16 17 <a href="#" class="carousel-control carousel-control-prev inactive"><</a> 18 <a href="#" class="carousel-control carousel-control-next inactive">></a> 19 </div> 20 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 21 <script src="test.js"></script> 22 </body> 23</html>
css
1.box { 2 width:400px; 3 height:400px; 4} 5 6.img1 { 7 background-color: blue; 8} 9 10.img2 { 11 background-color: red; 12} 13 14.img3 { 15 background-color: yellow; 16} 17 18.img4 { 19 background-color: skyblue; 20} 21 22/*カルーセルのひょうじ範囲指定*/ 23.carousel { 24 position:relative; 25 overflow:hidden; 26 width:400px; 27 height:400px; 28 margin:0 auto; 29} 30 31/*矢印のスタイル*/ 32.carousel-control { 33 display:block; 34 width:30px; 35 height:50px; 36 background-color:#f0f0f0; 37 color:#333; 38 text-align:center; 39 line-height:45px; 40 text-decoration:none; 41 font-size:2rem; 42 opacity:.5; 43 /*透明度をふわっと変える*/ 44 transition: opacity .15s; 45} 46/*マウスが乗ったら濃くする*/ 47.carousel-control:hover { 48 opacity:.8; 49} 50 51/*コントルールボタンの位置*/ 52/*左矢印*/ 53.carousel-control-prev { 54 position:absolute; 55 left:0; 56 top:200px; 57 text-indent:-2px; 58} 59/*右矢印*/ 60.carousel-control-next { 61 position:absolute; 62 right:0; 63 top:200px; 64 text-indent:2px; 65} 66 67.slides { 68 position:absolute; 69 top:0; 70 left:0; 71 /*横1枚一続き写真にする*/ 72 width:99999px; 73 /*ul liのデフォルトスタイル消去*/ 74 margin:0; 75 padding:0; 76 list-style:none; 77} 78/*各写真を横つなぎにする*/ 79.slides li { 80 float:left; 81 width:400px; 82 height:400px; 83}
JavaScript
1//スライド1枚当たりの幅を取得 2var slideWidth = 400; 3//現在表示中のスライドを数える(0から) 4var currentSlide = 0; 5//スライドの全枚数 6var numSlides; 7 8 9function showSlide(index) { 10 if (index === 0) { 11 $(".carousel-control-prev").hide(); 12 } 13 else { 14 $(".carousel-control-prev").show(); 15 } 16 17 if(index === numSlides -1){ 18 $(".carousel-control-next").hide(); 19 }else { 20 $(".carousel-cotrol-next").show(); 21 } 22 23 $(".slides").stop().animate({ 24 left: -slideWidth * currentSlide + "px" 25 }, 600); 26} 27 28$(document).ready(function() { 29 //スライダーすべての枚数 30 numSlides = (".slides > li").length; 31 //最初のスライドを表示 32 showSlide(currentSlide); 33 34 // 左矢印がクリックされたら1つ前のスライドを表示 35 $(".carousel-control-prev").click(function() { 36 currentSlide--; 37 showSlide(currentSlide); 38 return false; 39 }); 40 41 // 右矢印がクリックされたら1つ後のスライドを表示 42 $(".carousel-control-next").click(function() { 43 currentSlide++; 44 showSlide(currentSlide); 45 return false; 46 }); 47}); 48
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/18 09:07
2019/03/18 09:23
2019/03/18 09:41