Let bootstrap's carousel support sliding scrolling implementation code

The original carousel component does not support sliding scrolling:

The code is as follows:

<span style="white-space:pre">  </span><div class="row"> 
    <div  class="carousel slide" 
      data-ride="carousel"> 
      <ol class="carousel-indicators"> 
        <li data-target="#carousel-generic" data-slide-to="0" 
          class="active"></li> 
        <li data-target="#carousel-generic" data-slide-to="1"></li> 
        <li data-target="#carousel-generic" data-slide-to="2"></li> 
      </ol> 
 
      <div class="carousel-inner" style="text-align: center"> 
        <div class="item active"> 
          <img alt="First slide" src="img/slide/"></img> 
        </div> 
        <div class="item"> 
          <img alt="Second slide" src="img/slide/"></img> 
        </div> 
        <div class="item"> 
          <img alt="Third slide" src="img/slide/"></img> 
        </div> 
      </div> 
 
      <a class="left carousel-control" href="#carousel-generic" rel="external nofollow" rel="external nofollow"  
        data-slide="prev"> <span 
        class="glyphicon glyphicon-chevron-left"></span> 
      </a> <a class="right carousel-control" href="#carousel-generic" rel="external nofollow" rel="external nofollow"  
        data-slide="next"> <span 
        class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
    </div> 
  </div>

In the above method, you can trigger the switching by clicking the arrows on the left and right sides, but you cannot slide the switching. Of course, automatic switching is still possible.

There are actually many ways to solve the above problems, and the more convenient way is to use hammer.

Before this, you need to download,.

If you can't download it, you can download it in my resources

The code is as follows:

&lt;--! jsorder --&gt; 
&lt;script type="text/javascript" src="js/"&gt;&lt;/script&gt; 
&lt;script type="text/javascript" src="js/"&gt;&lt;/script&gt; 
&lt;script type="text/javascript" src="js/hammer/"&gt;&lt;/script&gt; 
&lt;script type="text/javascript" src="js/hammer/"&gt;&lt;/script&gt; 
[javascript] view plain copy
//If you need it, you can comment out the left and right arrows$('#carousel-generic').hammer().on('swipeleft', function(){ 
  $(this).carousel('next'); 
}); 
$('#carousel-generic').hammer().on('swiperight', function(){ 
  $(this).carousel('prev'); 
});

Summarize

The above is the implementation code that the editor introduces to you to make bootstrap's carousel support sliding scrolling. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!