这是我的一些div(具有col-md-2 col-sm-4类),它显示一些图标,我希望这些图标像在移动设备中的滑块一样左右移动
<div class="container">
<div class="row social">
<div class="col-md-2 col-sm-4">
<a href="#" class="link cat" target="_parent" style="margin-right: 0px;">
<img class="categ" src="img/off-road.png" />
</a>
<div>yiiiii</div>
</div>
<div class="col-md-2 col-sm-4">
<a href="#" class="link cat" target="_parent">
<img class="categ" src="img/sea.png" />
</a>
<div>miiii</div>
</div>
<div class="col-md-2 col-sm-4">
<a href="#" class="link cat" target="_parent">
<img class="categ" src="img/summer.png" />
</a>
<div>biiiiii</div>
</div>
</div>
</div>
我找到了使用光滑滑块的解决方案---> http://kenwheeler.github.io/slick/ 并且它解释了它的用法 我的代码:
<div class="container">
<div class="container-fluid">
<div class="row social">
<div class="slider-services ">
<div class="col-md-2 col-sm-4">
<a href="#" class="link cat" target="_parent" style="margin-right: 0px;"><img class="categ" src="img/off-road.png" /></a>
<div>iiii</div>
</div>
<div class="col-md-2 col-sm-4">
<a href="#" class="link cat" target="_parent"><img class="categ" src="img/sea.png" /></a>
<div>miii</div>
</div>
<div class="col-md-2 col-sm-4">
<a href="#" class="link cat" target="_parent"><img class="categ" src="img/summer.png" /></a>
<div>biii</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function (){
$('.slider-services').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
</script>