阻止内联滑块li元素接触/合并carouFredSel

时间:2019-01-26 21:36:25

标签: javascript html css slider caroufredsel

他们说一幅画描绘了一千个单词:

在大屏幕上,我的元素看起来还不错(滑块的3张幻灯片全部以它们之间的空白显示): enter image description here

它们之间有填充,我认为这是通过carouFredSel插件自动发生的。

但是,随着屏幕变小,应该将元素从视图中隐藏起来,它们会:(显示两张幻灯片,但中间没有空白):

enter image description here

但是它们最终被捆绑在一起,而在上面的直接图片和下面的图片之间没有空白。 (三张幻灯片显示,但它们之间没有空白,并且一张幻灯片被切除):

enter image description here

每种颜色都是高度和宽度相同的li元素(请参见示例)。

理想情况下,在这样小的屏幕上(886px),我只想显示两个li元素,因此它们都有空间。较小的屏幕上只显示一个,但是上帝知道这是否可能。

请为有足够勇气的人找到完整的代码示例。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width , initial-scale=1.0">
    <!-- css styles -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
      ul li {
        display: inline-block;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script>
  </head>
  <body>

  <div class="container">
    <div class="row">
      <ul class="my-carousel">
        <li>
          <div class="inner-content">
            <div style="width: 263px; height: 222px; background-color: blue;"></div>
          </div>
        </li>
        <li>
          <div class="inner-content">
            <div style="width: 263px; height: 222px; background-color: yellow;"></div>
          </div>
        </li>
        <li>
          <div class="inner-content">
            <div style="width: 263px; height: 222px; background-color: red;"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  /** script goes here **/

  </body>

</html>

以及使carasouel工作的脚本:

<script>
  $('.my-carousel').carouFredSel({
    responsive: true,
    items: {
      visible: {
        min: 1,
        max: 4
      },
    }
  });
</script>

需要明确的是,本文中的图片中,第一个是图片看起来不错时的样子(足够的宽度以显示三张幻灯片,并且每张幻灯片之间都有边距)。

第二张图片是错误的,因为只有一个幻灯片适合较小的屏幕宽度(移动)。

第三个是错误的,因为在这样大小(平板电脑)的屏幕上只能放两张幻灯片。

我的一部分认为我应该只找到另一个JS滑块库,因为这个似乎不再有任何文档。

0 个答案:

没有答案