如何使一些div元素像滑块一样左右移动

时间:2018-10-14 08:01:53

标签: javascript jquery html css web

这是我的一些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>

0 个答案:

没有答案