Vòng lặp thanh trượt Jquery Div

Nov 03 2020

Tôi có một vấn đề nhỏ. Các slide div và đến cuối nó sẽ nhanh chóng hiển thị div 1 mà không cần tạm dừng. Div 5 không thể nhìn thấy.

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

Nhưng nếu tôi thêm chậm trễ

   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>

Nó hiển thị Div 5 như nó cần, nhưng sau khi hiển thị div 1, nó không trượt nữa.

Vì vậy, tôi có thể làm gì để tiếp tục lặp lại và hiển thị mỗi div thời gian nhất định?

Có lẽ ai đó có thể chỉ cách làm cho thanh trượt trượt ngược lại sau khi đạt đến div cuối cùng và trượt trở lại div một?

Trả lời

1 Spring Nov 06 2020 at 04:16

Thứ nhất: Giải pháp BAD cho vấn đề của bạn: (chuyển đến Thứ hai)

Mã hoạt ảnh của bạn được xếp vào hàng đợi sau khi current == $slide.length, bạn nên chuyển hàm tiếp theo làm đối số trong lệnh phản hồi của hàng đợi rồi sử dụng next()để kích hoạt hàm khác. như sau :

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

nhưng điều này sẽ không làm cho việc hợp tác hoạt động như mong đợi

Thứ hai: giải pháp đơn giản thích hợp

Những gì tôi đề xuất là, đặt giá trị bên trái của hoạt ảnh làm biến, sau đó kiểm tra xem đó có phải là giá trị cuối cùng hay không để trượt về 0 khác tiếp tục trượt theo chiều rộng xem bên trái một cách khôn ngoan