在原型中使用“ Swiper” JS库时的CSS挑战

时间：2019-10-29 23:59:13

标签： javascript css swiper

我正在使用HTML / JS / CSS进行原型设计，试图构建以下内容：

image color extraction

不幸的是，我正在努力解决CSS部分。在下面，您可以找到一个功能全面的最小实现，但包含4个问题：

  1. 从幻灯片1滚动到幻灯片19时，我只能滚动到幻灯片19的一半。我想看完整的幻灯片19。

  2. 我上传了一个512x512的图片，在内存中生成了285x285的图片。怎么样？

  3. 我无法使用'display：inline'将两个div：<div class="swiper-slide0">First Color</div>和<div class="swiper-container">放在一行上（最终结果的可视化）。怎么样？

  4. “滑动器” JS库允许设置“ slidesPerView”（例如等于5），但是一旦应用，无论屏幕尺寸如何，它都将保持这种状态。

    • 我想根据设备的screenWidth / screenHeight设置一个blockWidth / blockHeight，该值始终在可读性/可用性范围内应用（例如，当屏幕为1127px宽时，应最大块数被显示出来，是5、6、7还是只有4）。因此，我想动态设置blockWidth / blockHeight，而不必输入slidesPerView，这现在导致以下事实：在调整屏幕大小以符合slidesPerView = 5时，更改了blockWidth / blockHeight。

    • 当前解决方案：我更改了“宽度：100％；”在“ .swiper-container”中设置为“宽度：285像素；”。然后，JS会自动将元素的宽度分配为55px。然后，我使用此结果来手动设置其他元素的大小。预期结果：原生JavaScript / CSS中的自动替代方法

<!doctype html>
<html>
<head>

  <title>Prototyping</title>

  <!-- Link Swiper's CSS -->

  <!-- Override/Add -->
  <style id="color_thief-js">

    .image-section {
        margin-bottom: 80px;
    }

    .image-wrap {
        position: relative;
        line-height: 1em;
        min-height: 240px;
        background-color: var(--hover-bg-color);
        border-radius: var(--border-radius-xl);
    }

    .target-image {
        border-radius: var(--border-radius-xl);
        transition: border-radius 0.2s 0.3s;
    }

    .target-image {
        display: block;
        width: 20%;
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
    }

  </style>

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">

  <!-- Override/Add -->
  <style id="swiper-js">

    .swiper-container {
      width: 285px;*/
      /*width: 100%;*/
      /*height: 100%;*/
    }

    .swiper-slide {
      height: 55px;
      text-align: center;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 10px;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background: #fff;
      /* Center slide text vertically */
      align-items: center;
      border: 1px solid black;
      border-radius: 10px;
    }

    .swiper-slide0 {
      width: 55px;
      height: 55px;
      text-align: center;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 10px;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background: #fff;
      border: 2px solid black;
      border-radius: 10px;
    }
  </style>

  <style id="custom">

  div.first-container {
    display:inline;
  }

  </style>

  <!-- Link Swiper's JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>

</head>
<body>

<script>

      var dcolor;
      var colorp;
      var base64String1;
      var base64String2;
      var base64String3;

      window.addEventListener('load', function() {
        document.getElementById('sf_0').addEventListener('change', function() {
          if (document.getElementById('sf_0').files[0]) {
              console.log("--- Image #1 ---");
              //console.log(document.getElementById('image_0'));
              var img1 = document.getElementById('image_0');
              var reader = new FileReader();
              reader.readAsDataURL(document.getElementById('sf_0').files[0]);
              reader.onload = function () {
                base64String1 = reader.result;
                img1.src = base64String1;
                //console.log(img1.src);
                img1.id = document.getElementById('image_0').id;
                //console.log(img1.id);
                //extractColors(img1.id, 1);
              };
              reader.onerror = function (error) {
                console.log('Error: ', error);
              };

          }
        });
      });

</script>

<div class="image-section ">
  <div class="image-wrap"><input class="source-file" id="sf_0" type='file' /><br><img class="target-image" id="image_0" alt="image_0" src="#"></div>
  <div class="first-container">
      <div class="swiper-slide0">First Color</div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
          <div class="swiper-slide">Slide 11</div>
          <div class="swiper-slide">Slide 12</div>
          <div class="swiper-slide">Slide 13</div>
          <div class="swiper-slide">Slide 14</div>
          <div class="swiper-slide">Slide 15</div>
          <div class="swiper-slide">Slide 16</div>
          <div class="swiper-slide">Slide 17</div>
          <div class="swiper-slide">Slide 18</div>
          <div class="swiper-slide">Slide 19</div>
      </div>
    </div>
  </div>
  <div class="second-container">
      <div class="swiper-slide0">Second Color</div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
          <div class="swiper-slide">Slide 11</div>
          <div class="swiper-slide">Slide 12</div>
          <div class="swiper-slide">Slide 13</div>
          <div class="swiper-slide">Slide 14</div>
          <div class="swiper-slide">Slide 15</div>
          <div class="swiper-slide">Slide 16</div>
          <div class="swiper-slide">Slide 17</div>
          <div class="swiper-slide">Slide 18</div>
          <div class="swiper-slide">Slide 19</div>
      </div>
    </div>
  </div>
  <div class="third-container">
      <div class="swiper-slide0">Third Color</div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
          <div class="swiper-slide">Slide 11</div>
          <div class="swiper-slide">Slide 12</div>
          <div class="swiper-slide">Slide 13</div>
          <div class="swiper-slide">Slide 14</div>
          <div class="swiper-slide">Slide 15</div>
          <div class="swiper-slide">Slide 16</div>
          <div class="swiper-slide">Slide 17</div>
          <div class="swiper-slide">Slide 18</div>
          <div class="swiper-slide">Slide 19</div>
      </div>
    </div>
  </div>
</div>


<!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 5,
      spaceBetween: 2.5,
      freeMode: true,
      //loop: true,
      simulateTouch: true,
    });
  </script>

</body>
</html>

有什么想法吗？谢谢！

1 个答案:

答案 0 :(得分：2)

  1. 这是由您赋予滑动元素的边框引起的。这些使Swiper计算宽度的方式以及允许滚动的距离变得混乱。将swiper内的所有元素设置为box-sizing: border-box。

  2. 我无法在您的代码中找到与此相关的任何内容。您不会在任何地方显示/记录图像尺寸。也许只是不清楚您在“何时在内存中”是什么意思

  3. Swiper默认CSS设置margin-left: auto和margin-right: auto。您必须重写此设置才能删除边距。我还建议使用display: flex对齐行项目。

  4. 要获得固定宽度的幻灯片，请在slidesPerView: 'auto'配置中设置Swiper并为width设置一个固定的height / .swiper-slide您甚至可以通过CSS媒体查询断点更改的元素。滑动器将自动调整大小。 （运行它后，单击堆栈摘录下面的“整页”链接，并将浏览器窗口的大小调整为700px宽度以下以进行演示。）

    但是，这会导致每张滑动器中最后一张幻灯片的右边框被切除，即使在向右滚动的时候也是如此。我通过将margin-right: 1px添加到每个.swiper-slide:last-child中来解决此问题。

    您还可以使用breakpoints参数根据您可以定义的断点更改Swiper选项。 See the official docs。

我将您的样式标签留在了代码段的HTML部分中，并将样式添加到了CSS部分中。

var dcolor;
var colorp;
var base64String1;
var base64String2;
var base64String3;

window.addEventListener('load', function() {
  document.getElementById('sf_0').addEventListener('change', function() {
    if (document.getElementById('sf_0').files[0]) {
      console.log("--- Image #1 ---");
      //console.log(document.getElementById('image_0'));
      var img1 = document.getElementById('image_0');
      var reader = new FileReader();
      reader.readAsDataURL(document.getElementById('sf_0').files[0]);
      reader.onload = function() {
        base64String1 = reader.result;
        img1.src = base64String1;
        //console.log(img1.src);
        img1.id = document.getElementById('image_0').id;
        //console.log(img1.id);
        //extractColors(img1.id, 1);
      };
      reader.onerror = function(error) {
        console.log('Error: ', error);
      };

    }
  });
});

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  spaceBetween: 2,
  freeMode: true,
  //loop: true,
  simulateTouch: true
});
.swiper-wrapper *,
.swiper-slide0 {
  box-sizing: border-box;
}

.first-container,
.second-container,
.third-container {
  display: flex;
  align-items: center;
  margin-bottom: 2.5px;
}

.swiper-container {
  margin: 0 !important;
  width: auto !important;
}

.swiper-slide0 {
  margin-right: 2.5px;
  flex-shrink: 0;
}

.swiper-slide {
  width: 55px !important;
}

.swiper-slide:last-child {
  margin-right: 1px;
}

@media screen and (min-width: 700px) {
  .swiper-slide,
  .swiper-slide0 {
    width: 100px !important;
    height: 100px !important;
  }
}
<style id="color_thief-js">
  .image-section {
    margin-bottom: 80px;
  }
  
  .image-wrap {
    position: relative;
    line-height: 1em;
    /*min-height: 240px;*/
    background-color: var(--hover-bg-color);
    border-radius: var(--border-radius-xl);
  }
  
  .target-image {
    border-radius: var(--border-radius-xl);
    transition: border-radius 0.2s 0.3s;
  }
  
  .target-image {
    display: block;
    width: 20%;
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
  }
</style>

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">

<!-- Override/Add -->
<style id="swiper-js">
  .swiper-container {
    width: 285px;
  }
  
  .swiper-slide {
    height: 55px;
    text-align: center;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background: #fff;
    /* Center slide text vertically */
    align-items: center;
    border: 1px solid black;
    border-radius: 10px;
  }
  
  .swiper-slide0 {
    width: 55px;
    height: 55px;
    text-align: center;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background: #fff;
    border: 2px solid black;
    border-radius: 10px;
  }
</style>

<!-- Link Swiper's JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>

<div class="image-section ">
  <div class="image-wrap"><input class="source-file" id="sf_0" type='file' /><br><img class="target-image" id="image_0" alt="image_0" src="#"></div>
  <div class="first-container">
    <div class="swiper-slide0">First Color</div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
        <div class="swiper-slide">Slide 11</div>
        <div class="swiper-slide">Slide 12</div>
        <div class="swiper-slide">Slide 13</div>
        <div class="swiper-slide">Slide 14</div>
        <div class="swiper-slide">Slide 15</div>
        <div class="swiper-slide">Slide 16</div>
        <div class="swiper-slide">Slide 17</div>
        <div class="swiper-slide">Slide 18</div>
        <div class="swiper-slide">
          <div class="inner">Slide 19</div>
        </div>
      </div>
    </div>
  </div>
  <div class="second-container">
    <div class="swiper-slide0">Second Color</div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
        <div class="swiper-slide">Slide 11</div>
        <div class="swiper-slide">Slide 12</div>
        <div class="swiper-slide">Slide 13</div>
        <div class="swiper-slide">Slide 14</div>
        <div class="swiper-slide">Slide 15</div>
        <div class="swiper-slide">Slide 16</div>
        <div class="swiper-slide">Slide 17</div>
        <div class="swiper-slide">Slide 18</div>
        <div class="swiper-slide">Slide 19</div>
      </div>
    </div>
  </div>
  <div class="third-container">
    <div class="swiper-slide0">Third Color</div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
        <div class="swiper-slide">Slide 11</div>
        <div class="swiper-slide">Slide 12</div>
        <div class="swiper-slide">Slide 13</div>
        <div class="swiper-slide">Slide 14</div>
        <div class="swiper-slide">Slide 15</div>
        <div class="swiper-slide">Slide 16</div>
        <div class="swiper-slide">Slide 17</div>
        <div class="swiper-slide">Slide 18</div>
        <div class="swiper-slide">Slide 19</div>
      </div>
    </div>
  </div>
</div>

相关问题
最新问题