使用引导轮播滑动支持答案

【问题标题】：Swipe support with bootstrap carousel使用引导轮播滑动支持
【发布时间】：2017-02-05 12:10:10
【问题描述】：

已解决参考https://github.com/avinoamr/bootstrap-carousel-swipe

大家好，我正在尝试为我的小型企业设计一个网站。我的主要目标是为我的引导自定义轮播添加滑动支持。我已经找到了几个答案，但我似乎无法让它在我的旋转木马上工作。经过一个小时的反复试验，我寻求一些建议......

我错过了什么？预先感谢您的帮助！

更新我仍在努力让它工作。我尝试使用 jquery cdn 而不是本地文件。我一直尝试使用hammer.js 方法。我开始想，也许 div 覆盖正在停止它，所以我删除了那些用于测试目的但没有成功。我还尝试删除数据间隔但没有成功......再次感谢您的帮助。

/* 我的轮播 HTML */

<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="10000" id="bs-carousel">

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#bs-carousel" data-slide-to="1"></li>
    <li data-target="#bs-carousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item slides active">
      <!-- Overlay -->
  <div class="overlay"></div>
      <div class="slide-1" role="img" aria-label="Shingle Roofing Free Estimates Licensed Bonded Insured"></div>
      <div class="hero">
        <header>
            <h1>Shingle Roofing</h1>        
            <h3>"Get the Estimate You Deserve!"</h3>
        </header>
        <a href="tel:+12178207597" class="btn btn-hero btn-lg" role="button">Call Now (217) 820-7597</a>
      </div>
    </div>
    <div class="item slides">
      <!-- Overlay -->
  <div class="overlay"></div>
      <div class="slide-2" role="img" aria-label="Metal Roofing Free Estimates Licensed Bonded Insured"></div>
      <div class="hero">        
        <header>
            <h1>Metal Roofing</h1>        
            <h3>"Get the Estimate You Deserve!"</h3>
         </header>      
        <a href="tel:+12178207597" class="btn btn-hero btn-lg" role="button">Call Now (217) 820-7597</a>
      </div>
    </div>
    <div class="item slides">
      <!-- Overlay -->
  <div class="overlay"></div>
      <div class="slide-3" role="img" aria-label="Rubber Roofing Free Estimates Licensed Bonded Insured"></div>
      <div class="hero">        
        <header>
            <h1>Rubber Roofing</h1>        
            <h3>"Get the Estimate You Deserve!"</h3>
        </header>
        <a href="tel:+12178207597" class="btn btn-hero btn-lg" role="button">Call Now (217) 820-7597</a>
      </div>
    </div>
  </div> 
</div>

/* 幻灯片支持脚本 */

<script src="js/jquery-3.1.1.min.js"></script>

<script>
  $(document).ready(function() {  
         $("#bs-carousel").swiperight(function() {  
              $(this).carousel('next');  
                });  
           $("#bs-carousel").swipeleft(function() {  
              $(this).carousel('prev');  
       });  
    });  
</script>

【问题讨论】：

标签： jquery twitter-bootstrap