質問編集履歴

1 コードをコードブロックで囲みました。ご指摘ありがとうございました。

Naotimu

Naotimu score 12

2019/04/09 15:37  投稿

スライダーのループ処理
### 前提・実現したいこと
Jquery初心者です。
課題でJquery、プラグインなしでスライダーを作っています。
スライダーは自動再生し、五秒毎に切り替わり、
右、左ボタンでもコントロールできるようにしたいです。
ボタンでのコントロールはうまくいったのですが、
自動再生に問題があります。
スライドが最後までいった時、最初のスライドを最後のスライドの後ろにつけて、
ループにしたいのですがうまくいきません。
あと、冒頭部分でインジゲーター(class:pagination)のa要素をjqueryで追加しているのですが、追加されたa要素の前にundefinedが出て、肝心のインジゲーターが存在していますが表示されません。
### 該当のソースコード
HTML
```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
```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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
  • HTML

    17620 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    12153 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • jQuery

    11019 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る