Naotimu score 12
2019/04/09 15:37 投稿
| スライダーのループ処理 |
| ### 前提・実現したいこと |
| Jquery初心者です。 |
| 課題でJquery、プラグインなしでスライダーを作っています。 |
| スライダーは自動再生し、五秒毎に切り替わり、 |
| 右、左ボタンでもコントロールできるようにしたいです。 |
| ボタンでのコントロールはうまくいったのですが、 |
| 自動再生に問題があります。 |
| スライドが最後までいった時、最初のスライドを最後のスライドの後ろにつけて、 |
| ループにしたいのですがうまくいきません。 |
| あと、冒頭部分でインジゲーター（class：pagination）のa要素をjqueryで追加しているのですが、追加されたa要素の前にundefinedが出て、肝心のインジゲーターが存在していますが表示されません。 |
| ### 該当のソースコード |
| ```HTML |
| <body> |
| <div class="container-fluid"> |
| <section class="row" id="slider"> |
| <div class="col-md-12 slide-container"> |
| <div class="col-md-12 slide" id="slide06"></div> |
| <div class="col-md-12 slide" id="slide01"></div> |
| <div class="col-md-12 slide" id="slide02"></div> |
| <div class="col-md-12 slide" id="slide03"></div> |
| <div class="col-md-12 slide" id="slide04"></div> |
| <div class="col-md-12 slide" id="slide05"></div> |
| </div> |
| <div class="slider-navi"> |
| <a href="#" class="arrow next"><i class="fas fa-arrow-right"></i></a> |
| <a href="#" class="arrow prev"><i class="fas fa-arrow-left"></i></a> |
| </div> |
| <div class="pagination"></div> |
| </section> |
| ``` |
| CSS |
| ```CSS |
| .container-fluid, .row, .col-md-12{ |
| margin:0; |
| padding: 0; |
| } |
| #slider { |
| height: 500px; |
| width: 100%; |
| position: relative; |
| overflow: hidden; |
| color:#fff; |
| } |
| .slide-container { |
| width: 600%; |
| height: 100%; |
| display: flex; |
| position: absolute; |
| z-index: 0; |
| left: -100%; |
| } |
| .slider-navi a, |
| .pagination a { |
| overflow: hidden; |
| } |
| .slider-navi a.disabled{ |
| display: none; |
| } |
| .arrow { |
| z-index: 10; |
| cursor: pointer; |
| position: absolute; |
| bottom: 30px; |
| color: #FFF; |
| font-size: 1.4em; |
| border: solid 1px #FFF; |
| padding: 8px; |
| } |
| .next { |
| position: absolute; |
| right: 25px; |
| } |
| .prev { |
| position: absolute; |
| left: 25px; |
| } |
| .pagination { |
| position: absolute; |
| bottom: 30px; |
| left: 50%; |
| margin-left: -50px; |
| width: 100px; |
| z-index: 30; |
| } |
| .pagination a { |
| float: left; |
| margin: 5px 5px 0; |
| width: 10px; |
| height: 10px; |
| background: #eee; |
| vertical-align: middle; |
| } |
| .pagination a.active{ |
| cursor: default; |
| } |
| .pagination a.active:before{ |
| margin-left: -130px; |
| } |
| ``` |
| ```Jquery |
| let slider, slideContainer, slides, nav, pagination, imgNumber, animationSpeed, interval, currentSlide, paginationHtml, timer; |
| var $slider = $('#slider'), // on cible le bloc du slider |
| $slideContainer = $slider.find('.slide-container'), |
| $slides = $slideContainer.find('.slide'), |
| $nav = $slider.find('.slider-navi'), |
| $pagination = $slider.find('.pagination'), |
| $slideLength = $slides.length, |
| $currentSlide = 1, |
| $paginationHtml = '', |
| i = 0; |
| slides.each(function(i) { |
| paginationHtml += '<a href="#">' + ( i + 1) + '</a>'; |
| }); |
| $pagination.html(paginationHtml); |
| const maSlider = { |
| clickBouton: function(){ |
| $('.prev').on('click', function(){ |
| //event.preventDefault(); |
| $slideContainer.animate({'left': '0'},300, function(){ |
| $(this).css('left','-100%'); |
| $('.slide').first().before($('.slide').last()); |
| }); |
| }); |
| $('.next').on('click', function(){ |
| //event.preventDefault(); |
| $slideContainer.animate({'left': '-200%'},300, function(){ |
| $(this).css('left','-100%'); |
| $('.slide').last().after($('.slide').first()); |
| }); |
| }); |
| $pagination.on('click', function(event){ |
| event.preventDefault(); |
| if($('.pagination a').hasClass('active')){ |
| startSlider($(this).index()); |
| } |
| }); |
| }, //clickBouton |
| startSlider: function(){ |
| timer = setInterval(function(){ |
| let large = $slider.width(); |
| $slideContainer.animate({'margin-left': '-='+large}, function(){ |
| currentSlide++; |
| if (currentSlide === $slides.length){ |
| currentSlide = 1; |
| let lastSlide = $slides.first(); |
| $slideContainer.append(lastSlide); |
| let lastSlidePosition = large * ($slideLength -1); |
| lastSlide.css('left', `${ lastSlidePosition }px`); |
| for(var i = 1; i < $slideLength; i++){ |
| let slide = currentSlide.eq(i); |
| const slidePosition = large * (i-2); |
| slide.animate({left: `${ slidePosition }px`}, 5000); |
| } |
| const movedLastSlidePosition = large * ($slideLength - 2) |
| lastSlide.animate({left: `${ movedLastSlidePosition }px`}, 5000) |
| } |
| }); |
| }, 5000); |
| }, |
| stopSlider: function(){ |
| clearInterval(); |
| }, |
| $slider.on({ |
| mouseenter: stopTimer, |
| mouseleave: startSlider |
| }); |
| }; |
| //}) |
| maSlider.startSlider(); |
| maSlider.stopSlider(); |
| maSlider.clickBouton(); |
| ``` |
| ### 試したこと |
| 散々、いろんなネットの情報やら本を見てやってみたのですが、どうしても解決できません。 |
| 助けてください。よろしくお願いします。 |
| ### 補足情報（FW/ツールのバージョンなど） |
| ここにより詳細な情報を記載してください。 |
