Question

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

在大屏幕上，我的元素看起来还不错（滑块的3张幻灯片全部以它们之间的空白显示）：

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

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

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

每种颜色都是高度和宽度相同的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滑块库，因为这个似乎不再有任何文档。

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

0 个答案: