前提・実現したいこと
javascriptで、HTML内にスライダーを設置しようとしています。
そして、スライダーの画像の上に、<-前へ 次へ->という画像を一枚進退させるボタンを載せたいのですが、うまくいきません。よろしくお願いします。
スライダーの画像の上に、<-前へ 次へ->がうまく乗らない。 ```HTML ```HTML <div class="slide-wrapper"> <div class="change-btn-wrapper"> <div class="change-btn prev-btn">← 前へ</div> <div class="change-btn next-btn">次へ →</div> </div> <ul class="slides"> <li class="slide active"><a href="https://www.chatwork.com/#!rid104759326"><img src="images/0720e5e36bd5365ad8e4332b4b45e7db_m.jpg"></a></li> <li class="slide"><a href="https://newspicks.com/"><img src="images/08e6ea9cac38b30056ad51d6bb1fe0ad_m.jpg"></a></li> <li class="slide"><img src="images/1ff1778a5f23c9a691cef3561ab71b01_m.jpg"></li> <li class="slide"><img src="images/74efcb3c356bbe1e1b4fc2b7b5c1d1fe_m.jpg"></li> </ul> <div class="index-btn-wrapper"> <div class="index-btn">1</div> <div class="index-btn">2</div> <div class="index-btn">3</div> <div class="index-btn">4</div> </div> </div>
CSS
1 2.slide-wrapper { 3 text-align: center; 4 width: 960px; 5 margin: 0 auto; 6 color: #5e6f84; 7 padding: 60px 0; 8} 9 10.slide-title { 11 font-size: 40px; 12 margin-bottom: 30px; 13} 14 15.change-btn-wrapper { 16 width: 500px; 17 margin: 20px auto; 18 font-size: 18px; 19} 20 21.change-btn { 22z-index:2; 23} 24 25.change-btn-wrapper:after { 26 content: ""; 27 clear: both; 28 display: block; 29} 30 31.prev-btn { 32 cursor: pointer; 33 float: left; 34} 35 36.next-btn { 37 cursor: pointer; 38 float: right; 39} 40 41.slides { 42 padding: 0; 43} 44 45.slide { 46 display: none; 47} 48 49.active { 50 display: block; 51} 52 53.slide img { 54 width: 100%; 55 height: 500px; 56 z-index:-100; 57} 58 59.index-btn-wrapper { 60 font-size: 16px; 61 margin-top: 20px; 62} 63 64.index-btn { 65 display: inline-block; 66 color: #4e90af; 67 background-color: #e0f5ff; 68 width: 40px; 69 padding: 6px 0; 70 margin: 0 5px; 71 border-radius: 3px; 72 cursor: pointer; 73} 74 75.index-btn:hover { 76 color: #fff; 77 background-color: #5cabd0; 78} 79 80```Javascript 81```javascript 82 83$(function() { 84 85 function toggleChangeBtn() { 86 var slideIndex = $('.slide').index($('.active')); 87 $('.change-btn').show(); 88 if (slideIndex == 0) { 89 $('.prev-btn').hide(); 90 } else if (slideIndex == 3) { 91 $('.next-btn').hide(); 92 } 93 } 94 95 $('.index-btn').click(function() { 96 $('.active').removeClass('active'); 97 var clickedIndex = $('.index-btn').index($(this)); 98 $('.slide').eq(clickedIndex).addClass('active'); 99 toggleChangeBtn(); 100 }); 101 102 $('.change-btn').click(function() { 103 var $displaySlide = $('.active'); 104 $displaySlide.removeClass('active'); 105 if ($(this).hasClass('next-btn')) { 106 $displaySlide.next().addClass('active'); 107 } else { 108 $displaySlide.prev().addClass('active'); 109 } 110 toggleChangeBtn(); 111 }); 112});
試したこと
z-indexとmarginを使用して、画像の全面に<-前へ 次へ-> を移動させようとした。
補足情報(FW/ツールのバージョンなど)
HTML5 CSS3
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/28 13:05
2018/10/28 13:19