質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.20%

スライダーのループ処理

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 704

Naotimu

score 12

前提・実現したいこと

Jquery初心者です。

課題でJquery、プラグインなしでスライダーを作っています。
スライダーは自動再生し、五秒毎に切り替わり、
右、左ボタンでもコントロールできるようにしたいです。

ボタンでのコントロールはうまくいったのですが、
自動再生に問題があります。

スライドが最後までいった時、最初のスライドを最後のスライドの後ろにつけて、
ループにしたいのですがうまくいきません。

あと、冒頭部分でインジゲーター(class:pagination)のa要素をjqueryで追加しているのですが、追加されたa要素の前にundefinedが出て、肝心のインジゲーターが存在していますが表示されません。

該当のソースコード

<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>
.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;
}
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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/04/09 10:42

    (質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • kei344

    2019/04/09 23:32

    エラーは出ていませんか?デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error

    キャンセル

  • Naotimu

    2019/04/10 17:36

    回答ありがとうございます。このコードでは、エラーは出なかったのですが、スライドも自分が思っているようには起動しませんでした。あれから、色々見直して、大幅にコードを書き直し、思うようなところまでいけました。また、機会があればよろしくお願いします。

    キャンセル

  • kei344

    2019/04/10 17:53

    まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

    キャンセル

回答 2

check解決した方法

0

サイトのコードを参考にほぼコードを書き直しました。
最初のコードと比較すると、少しずついろんなものが不足していました。

まだ最後のスライドから最初のスライドに移る動作がカクカクするのが気になりますが、
とりあえず動きました。
回答いただいた方、ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

おそらくの回答ですがjQueryのコードの一部変に囲まれている部分があります。
“と"や’`と'などの間違いでは?
解決しなかったらすみません...

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/10 17:38

    回答ありがとうございます。正しいかどうかは分かりませんが、細かい部分の修正ではなかったようです。結局、ほぼ書き直して、うまくいきました。

    キャンセル

  • 2019/04/10 18:12

    そうですか、それは良かったです。
    それでは自己解決をお願いします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる