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(){}
});