Jquery Div 滑块循环

2022-01-24 00:00:00 slider jquery javascript

我有一个小问题.div 滑动并到达末尾它会快速显示 div 1 而不会暂停.Div 5 看不到.

I have a small problem. Div slides and reaching end it's quickly show div 1 without pause. Div 5 cannot see.

$(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);
});

但如果我添加延迟

   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>

它显示 div 5 就像它需要的那样，但是在显示 div 1 之后它不再滑动了.

It's show Div 5 like it needed, but after showing div 1 it's not sliding anymore.

那么我可以做些什么来保持循环并显示给定时间的每个 div?

So what can I do to keep looping and shows each div given time?

也许有人可以展示如何使滑块在到达最后一个 div 后向后滑动并滑回第一个 div?

Maybe someone can show how can make slider slide backwards after reaching last div and slides back to div one?

推荐答案

第一个:你的问题的错误解决方案:(转到第二个)

您的动画代码在 current == $slide.length 后卡在队列中，您应该将下一个函数作为参数传递给队列回调，然后使用 next() 触发其他功能.如下:

Your animation code stucks in a queue once the current == $slide.length , you should pass the next function as argument in the queue calback then use next() to trigger other function . as below :

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

但这不会使动画按预期工作

but this will not make the annimation work as expected

第二:适当的简单解决方案

我的建议是，将动画左值设置为变量，然后检查它是否是最后一个，所以滑动到 0 否则继续左视图宽度滑动

What I suggest is, set the animation left value as variable, then check if it's the last so slide to 0 other wise continue left view-width sliding

查看工作片段:

$(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>

相关文章