Jquery Div Schiebereglerschleife

Question

Ich habe ein kleines Problem. Div gleitet und erreicht das Ende. Es zeigt schnell Div 1 ohne Pause. Div 5 kann nicht sehen.

$(function(){ var width = '100vw'; var speed = 1500; var pause = 3000; var current = 1; var $slider = $('.slider'); var $slides = $slider.find('.slides'); var $slide = $slides.find('.slide'); setInterval(function(){ $slides.animate({'margin-left': '-='+width}, speed, function(){
        current++;
        if(current == $slide.length){ $slides.css('margin-left', 0); 
            current = 1;
        }
    });
}, pause);
});

Aber wenn ich Verzögerung hinzufüge

   if(current == $slide.length){ $(this).delay(pause).queue(function(){
                $slides.css('margin-left', 0); 
            });
            current = 1;
        }

$(function(){

    var width = '100vw';
    var speed = 1500;
    var pause = 3000;
    var current = 1;

    var $slider = $('.slider');
    var $slides = $slider.find('.slides');
    var $slide = $slides.find('.slide');

    setInterval(function(){
        $slides.animate({'margin-left': '-='+width}, speed, function(){ current++; if(current == $slide.length){
                $(this).delay(pause).queue(function(){ $slides.css('margin-left', 0); 
                });
                current = 1;
            }
        });
    }, pause);

});

.slider {
    width: 100%;
    height:auto;
    text-align: center;
    overflow: hidden;
  }
  .slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /*
    scroll-snap-points-x: repeat(300px);
    scroll-snap-type: mandatory;
    */
  }
  .slides::-webkit-scrollbar {
    width: 1px;
    height: 10px;
  }
  .slides::-webkit-scrollbar-thumb {
    background: #bbb;
  }
  .slides::-webkit-scrollbar-track {
    background: transparent;
  }
  .slides > div {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100vw;
    height: 100vh;
    background: #eee;
    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
  }
  .slides > div:target {
  /*   transform: scale(0.8); */
  }
  .author-info {
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 0.75rem;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
  }
  .author-info a {
    color: white;
  }
  img {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .slider > a {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    background: white;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    margin: 0 0 0.5rem 0;
    position: relative;
    border:1px solid green;
  }
  .slider > a:active {
    top: 1px;
  }
  .slider > a:focus {
    background: #666;
  }
  /* Don't need button navigation */
  @supports (scroll-snap-type) {
    .slider > a {
      display: none;
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">  
  <div class="slides">
    <div id="slide-1" class="slide">Slide 1</div>
    <div id="slide-2" class="slide">Slide 2</div>
    <div id="slide-3" class="slide">Slide 3</div>
    <div id="slide-4" class="slide">Slide 4</div>
    <div id="slide-5" class="slide">Slide 5</div>
   </div>
</div>

Es ist Show Div 5 wie es gebraucht wird, aber nachdem es Div 1 gezeigt hat, rutscht es nicht mehr.

Was kann ich also tun, um die Schleife fortzusetzen und jedes Div zu gegebener Zeit anzuzeigen?

Vielleicht kann jemand zeigen, wie man den Schieberegler nach Erreichen des letzten Div rückwärts gleiten lässt und zurück zum Div eins schiebt?

Answer 1

Erstens: SCHLECHTE Lösung für Ihr Problem: (weiter mit Zweitens)

Ihr Animationscode bleibt in einer Warteschlange stecken, sobald current == $slide.lengthSie die nächste Funktion als Argument im Warteschlangen-Calback übergeben und dann next()zum Auslösen einer anderen Funktion verwenden. wie nachstehend :

if(current == $slide.length){
    $(this).delay(pause).queue(function(next){ //<--- here next argument $slides.css('margin-left', 0); 
        next(); // <----- next call 
    });
    current = 1;
}

Dadurch funktioniert die Annimation jedoch nicht wie erwartet

Zweitens: richtige einfache Lösung

Was ich vorschlage, ist, den linken Animationswert als Variable festzulegen und dann zu überprüfen, ob es der letzte ist, also auf 0 zu schieben

Siehe Arbeitsausschnitt:

$(function(){ var width = '100vw'; var speed = 1500; var pause = 3000; var current = 1; var $slider = $('.slider'); var $slides = $slider.find('.slides'); var $slide = $slides.find('.slide'); var leftAnnime = '-='+width; setInterval(function(){ $slides.animate({'margin-left': leftAnnime }, speed, function(){
            current++;
            if( current == $slide.length ) {
              leftAnnime = 0;
              current = 0;
            } else {
              leftAnnime = '-='+width;
            }
        });
    }, pause);

});

.slider {
    width: 100%;
    height:auto;
    text-align: center;
    overflow: hidden;
  }
  .slides {
    display: flex;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /*
    scroll-snap-points-x: repeat(300px);
    scroll-snap-type: mandatory;
    */
  }
  .slides::-webkit-scrollbar {
    width: 1px;
    height: 10px;
  }
  .slides::-webkit-scrollbar-thumb {
    background: #bbb;
  }
  .slides::-webkit-scrollbar-track {
    background: transparent;
  }
  .slides > div {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100vw;
    height: 100vh;
    background: #eee;
    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
  }
  .slides > div:target {
  /*   transform: scale(0.8); */
  }
  .author-info {
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 0.75rem;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
  }
  .author-info a {
    color: white;
  }
  img {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .slider > a {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    background: white;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    margin: 0 0 0.5rem 0;
    position: relative;
    border:1px solid green;
  }
  .slider > a:active {
    top: 1px;
  }
  .slider > a:focus {
    background: #666;
  }
  /* Don't need button navigation */
  @supports (scroll-snap-type) {
    .slider > a {
      display: none;
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">  
  <div class="slides">
    <div id="slide-1" class="slide">Slide 1</div>
    <div id="slide-2" class="slide">Slide 2</div>
    <div id="slide-3" class="slide">Slide 3</div>
    <div id="slide-4" class="slide">Slide 4</div>
    <div id="slide-5" class="slide">Slide 5</div>
   </div>
</div>