Question

我正在为一家机械公司创建一个网站，特别是在零件销售方面 - 我想制作一个很酷的传送带式的东西穿过整个页面并在中心的标识后面，效果我和＃ 39;我正在寻找的基本上是在这个

中完成的

<div class="container">
  <div class="row cycle-slideshow" data-cycle-fx=carousel data-cycle-timeout=1000 data-cycle-carousel-visible=6 data-cycle-carousel-fluid=true data-cycle-slides="div">
    <div class="span2"><img src="http://lorempixel.com/200/200/"></div>

但我需要在图片之间没有间隙。有任何想法吗？我试着弄乱他们提供的代码，但没有结果。如果有人知道更简单的解决方案，请告诉我！我只是希望图像向左移动，暂停一秒然后继续移动，每个图像将是传送带的一部分，其中有一部分在它上面 - 这是沿着带移动的那种图像{{ 3}}

谢谢你们！

Answer 1

请尝试此

添加此CSS。差距是由于类.select2-dropdown.select2-dropdown--below{ width: 148px !important; } .select2-container--default .select2-selection--single{ padding:6px; height: 37px; width: 148px; font-size: 1.2em; position: relative; } .select2-container--default .select2-selection--single .select2-selection__arrow { background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303)); background-image: -moz-linear-gradient(top, #424242, #030303); background-image: -ms-linear-gradient(top, #424242, #030303); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303)); background-image: -webkit-linear-gradient(top, #424242, #030303); background-image: -o-linear-gradient(top, #424242, #030303); background-image: linear-gradient(#424242, #030303); width: 40px; color: #fff; font-size: 1.3em; padding: 4px 12px; height: 27px; position: absolute; top: 0px; right: 0px; width: 20px; }

中的填充引起的

col-xs-2

DEMO

Answer 2

只需将cycle-slide类的填充设置为0即可将每个图像连接在一起，无间隙。

.cycle-slide {
    padding:0;
}

Answer 3

只需添加样式：

padding : 0

到div。

所以风格变成：

.cycle-slideshow  div{
    float:none; padding:0
}

查看更新的代码集：＆＃34; http://codepen.io/anon/pen/yYmwYO＆＃34;

传送带效应

3 个答案: