Javascript,css,htmlを使って、手動のスライダーを作成しています。
表示されているスライダーの左右背面に、前のスライダー、後のスライダーの左右端だけ表示させたいのですが、やり方がよくわからないので、教えていただけるとありがたいです。
よろしくお願いします。
HTML
1<div class="slide-wrapper"> 2 <div class="slide-area"> 3 <div class="change-btn-wrapper"> 4 <div class="change-btn prev-btn"><</div> 5 <div class="change-btn next-btn">></div> 6 </div> 7 <ul class="slides"> 8 <li class="slide active"><a href="#"></a></li> 9 <li class="slide"><a href="#"></a></li> 10 <li class="slide"><img src="images/1ff1778a5f23c9a691cef3561ab71b01_m.jpg"></li> 11 <li class="slide"><img src="images/74efcb3c356bbe1e1b4fc2b7b5c1d1fe_m.jpg"></li> 12 </ul> 13 </div> 14 <div class="index-btn-wrapper"> 15 <div class="index-btn">1</div> 16 <div class="index-btn">2</div> 17 <div class="index-btn">3</div> 18 <div class="index-btn">4</div> 19 </div> 20 </div>
CSS
1.slide-area { 2 position: relative; 3 } 4 5.slide-wrapper { 6 text-align: center; 7 width: 960px; 8 margin: 0 auto -77px; 9 color: #5e6f84; 10} 11 12.slide-title { 13 font-size: 40px; 14} 15 16.change-btn-wrapper { 17 width: 500px; 18 font-size: 80px; 19 color:white;/* 調節してください */ 20 } 21 22.change-btn-wrapper:after { 23 content: ""; 24 clear: both; 25 display: block; 26} 27 28.prev-btn { 29 cursor: pointer; 30 float: left; 31 position: absolute; 32 top:42%; 33 display:none; 34} 35 36.next-btn { 37 cursor: pointer; 38 float: right; 39 position: absolute; 40 top:42%; 41 left:92%; 42} 43 44.slides { 45 padding: 0; 46} 47 48.slide { 49 display: none; 50} 51 52.active { 53 display: block; 54} 55 56.slide img { 57 width: 100%; 58 height: 500px; 59} 60 61.index-btn-wrapper { 62 font-size: 16px; 63 position:relative; 64 top:-70px; 65 } 66 67 68 69.index-btn { 70 display: inline-block; 71 color: #fff; 72 background-color: #2e2e2e; 73 width: 30px; 74 margin: 0 5px; 75 border-radius: 3px; 76 77} 78 79.index-btn:hover { 80 color: #fff; 81 background-color: #5cabd0; 82}
Javascript
1$(function() { 2 3 function toggleChangeBtn() { 4 var slideIndex = $('.slide').index($('.active')); 5 $('.change-btn').show(); 6 if (slideIndex == 0) { 7 $('.prev-btn').hide(); 8 } else if (slideIndex == $('.slide').length - 1) { 9 $('.next-btn').hide(); 10 } 11 } 12 13 $('.index-btn').click(function() { 14 $('.active').removeClass('active'); 15 var clickedIndex = $('.index-btn').index($(this)); 16 $('.slide').eq(clickedIndex).addClass('active'); 17 toggleChangeBtn(); 18 19 }); 20 21 $('.change-btn').click(function() { 22 var $displaySlide = $('.active'); 23 $displaySlide.removeClass('active'); 24 if ($(this).hasClass('next-btn')) { 25 $displaySlide.next().addClass('active'); 26 } else { 27 $displaySlide.prev().addClass('active'); 28 } 29 toggleChangeBtn(); 30 31 }); 32 33});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。