Javascript 引导转盘next/prev方法强制它更快地自动播放_Javascript_Jquery_Html_Bootstrap 4

Javascript 引导转盘next/prev方法强制它更快地自动播放

javascript jquery html bootstrap-4

Javascript 引导转盘next/prev方法强制它更快地自动播放,javascript,jquery,html,bootstrap-4,Javascript,Jquery,Html,Bootstrap 4,我正在使用jQuerySweep插件将滑动功能添加到我的旋转木马中。当页面加载时，我的旋转木马具有自动播放功能。当我滑动旋转木马时，它会触发下一个/上一个事件 <body> <div id='root'></div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVg

我正在使用jQuerySweep插件将滑动功能添加到我的旋转木马中。当页面加载时，我的旋转木马具有自动播放功能。当我滑动旋转木马时，它会触发下一个/上一个事件

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

如何解决这个问题？

为什么这个标记为reactjs？@DamianGreen因为它是用react JS编写的为什么不使用一些本机react carousel库？我不建议像这样使用reactjs和jquerythis@marzelin因为它最初是用Bootstrap编写的，我无法更改代码。但我认为这是一个更好的主意。建议如果你知道的话，请告诉我好的。

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