那些遇到过的问题

为我的原型利用“Swiper”JS 库时的 CSS 挑战

use*_*973 5 javascript css swiper

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

图像颜色提取

不幸的是，我在 CSS 部分苦苦挣扎。您可以在下面找到一个功能齐全的最小实现，但包含 4 个问题：

  1. 从幻灯片 1 --> 幻灯片 19 滚动时，我只能滚动到幻灯片 19 的一半。怎么会？我想完整地查看幻灯片 19。

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

  3. 我不能够使用“显示：内联”，使双方的div：<div class="swiper-slide0">First Color</div>和<div class="swiper-container">在同一行（最终结果的可视化CFR）。怎么来的？

  4. 'Swiper' JS 库允许设置 'slidesPerView'（例如等于 5），但一旦应用，无论屏幕尺寸如何，它都会保持不变。

    • 我想根据设备的 screenWidth/screenHeight 设置一个 blockWidth/blockHeight，它总是在可读性/可用性范围内应用（例如，当屏幕为 1127px 宽时，应显示最大数量的块，例如 5 , 6, 7 或者可能只有 4)。因此，我想动态设置 blockWidth/blockHeight 而不是必须输入 slidesPerView，这会导致在调整屏幕大小以遵循 slidesPerView = 5 时会更改 blockWidth/blockHeight。

    • 当前解决方案：我更改了“宽度：100%；” 在 '.swiper-container' 到“width: 285px;”。然后 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>
Run Code Online (Sandbox Code Playgroud)

有什么想法吗？谢谢！

Con*_*roß 3

  1. 这是由您为滑动元素指定的边框引起的。这些扰乱了Swiper计算宽度以及允许滚动的距离的方式。设置box-sizing: border-box滑动器内的所有元素来处理此问题。

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

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

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

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

    您还可以使用该参数根据您可以定义的断点breakpoints更改选项。请参阅官方文档。Swiper

我已将您的样式标签保留在代码片段的 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
});
Run Code Online (Sandbox Code Playgroud) 
.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;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

1143 次

最近记录：

6 年 前
相关归档
在<body>中使用<style>标签和其他HTML 183
滚动带有溢出内容的Flexbox 183
react.js中的实例v状态变量 111
Angularjs - 简单表单提交 63
如何使用CSS自定义HTML5输入范围类型？ 48
@ font-face适用于IE8但不适用于IE9 38
怎么不继承？或者如何将继承的宽度重置为之前的值？(CSS) 36
在.css文件中引用app相对虚拟路径 25
CSS样式嵌套 - 正确的形式？ 19
如何保持背景图像的宽高比？ 19
难疑归档
如何在JavaScript中替换所有出现的字符串 4081
是什么 !!(不是)JavaScript中的运算符？ 2906
如何在Python中复制文件？ 2171
如何从Java中的字符串值获取枚举值？ 1890
为什么这段代码使用随机字符串打印"hello world"？ 1733
Python中的switch语句的替换？ 1719
在jQuery中检测移动设备的最佳方法是什么？ 1564
如何获取MySQL用户帐户列表 1320
如何按多列对数据帧进行排序？ 1266
从不同的文件夹导入文件 1186