Question

我正在使用jquerySwipe插件向我的轮播添加滑动功能。页面加载时，我的轮播具有自动播放功能。当我滑动轮播时，它会触发下一个/上一个事件。

<body>
    <div id='root'></div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js'></script>
    <script>
      $(document).ready(function(){
        const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

        $(".carousel-inner").swipe({
          swipeLeft: function(event, direction, distance, duration, fingerCount, to, from){
            if(width < 992){
              this.parent().carousel('next');
            }
          },
          swipeRight: function(){
            if(width < 992){
              this.parent().carousel('prev');
            }
          },
          threshold: 0,
        }); 
      });
    </script>
  </body>

因此，让我们说this.parent().carousel('next')触发后，它开始自动滑动得更快，并且没有平滑的行为。

这是我用于引导轮播的html。

<div className='about-us'>  
        <div id='carouselExampleIndicators' className='carousel slide' data-ride='carousel' data-interval={autoplayInterval} data-pause="false">
          <div className='row flex-column-reverse flex-lg-row align-items-center about-us-row'>
            <>
              <div className='col-12 col-lg-6 about-us-left-column'>
                <div className='card card about-us-card'>
                  <div className='carousel-inner'>
                    {sliderImageGenerator()}
                  </div>
                </div>
              </div>
              <div className='col-12 col-lg-6 about-us-right-column'>
                <div className='card about-us-card'>
                  <div className='card-body about-us-card-body'>
                    <div className='inner-content'>
                      <p className='card-title about-us-card-title'>{aboutUsPresentationText.title}</p>
                      <div className='about-us-div' dangerouslySetInnerHTML={{__html: textCorrection(aboutUsPresentationText.text)}}></div>
                      <CarouselSwitchers className='switcherWeb' clickEvent={onCheckboxChange} loopData={aboutUsPresentationImages} targetEl='#carouselExampleIndicators'/>
                    </div>
                  </div>
                </div>
              </div>
            </>
          </div>
        </div>
      </div>

如何解决这个问题？

Bootstrap轮播next / prev方法强制其更快地自动播放

0 个答案: