Carousel of Bootstrap cooperates with dropload. js to realize sliding switching pictures on the mobile terminal

  • 2021-08-03 08:59:40
  • OfStack

Carousel can jump to the top one or the next one by clicking the button. On the mobile side, we often use sliding to achieve one time, so how to achieve it.

The following is the implementation method through Carousel and dropload. js of bootstrap (pulling the refresh plug-in up and down on the mobile side).

HTML Part


<div id="goods_lunbo" style="width:200%;overflow:hidden;margin-left:-50%;">
    <div id="goods_lunbo2" style="width:50%;overflow:hidden;margin:0 auto;">
     <div id="carousel-example-generic0" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
       <li data-target="#carousel-example-generic0" data-slide-to="0" class="active"></li>
       <li data-target="#carousel-example-generic0" data-slide-to="1"></li>
       <li data-target="#carousel-example-generic0" data-slide-to="2"></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" id="carousel-inner-z" role="listbox">
       <div class="item active">
        <img width="100%" src="http://img04.taobaocdn.com/bao/uploaded/i4/TB1LrSzIpXXXXaTXVXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" >
        <!--<div class="carousel-caption"></div>-->
       </div>
       <div class="item">
        <img width="100%" src="http://img01.taobaocdn.com/bao/uploaded/i1/TB1RXNmHFXXXXanXFXXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg" >
        <!--<div class="carousel-caption"></div>-->
       </div>
       <div class="item">
        <img width="100%" src="http://img01.taobaocdn.com/bao/uploaded/i1/TB1TjfsHVXXXXcSXVXXXXXXXXXX_!!1-item_pic.gif_220x220.jpg" >
        <!--<div class="carousel-caption"></div>-->
       </div>
      </div>
     </div>
    </div>
   </div>

JS Part


var carousel_=$("#carousel-example-generic0");
 $("#goods_lunbo").touchwipe({
  ReferenceMaterial:"#goods_lunbo2",// Covered div
  distance : 100,// Indicates the sliding distance 
  wipeLeftFn:function(){console.log(" Zozo Zozo ");carousel_.carousel('prev');},// Slide the screen to the left 
  wipeRightFn:function(){console.log(" Yo-yo-yo ");carousel_.carousel('next');},// Slide the screen to the right 
  nowipe:function(){}
 });

Related articles: