CSS 为我的原型利用 'Swiper' JS 库时遇到的挑战
CSS challenges when leveraging 'Swiper' JS Library for my prototype
我正在 HTML/JS/CSS 制作原型，尝试构建以下内容：
不幸的是，我在 CSS 部分苦苦挣扎。您可以在下面找到一个功能齐全但包含 4 个问题的最小实现：
从幻灯片 1 --> 幻灯片 19 滚动时，我只能滚动到幻灯片 19 的一半。怎么回事？我想完整地查看幻灯片 19。
我上传了一张 512x512 的图片，在内存中生成了一张 285x285 的图片。怎么来的？
我无法使用 'display: inline' 将两个 div：<div class="swiper-slide0">First Color</div> 和 <div class="swiper-container"> 放在一条线上（参见最终结果的可视化）。怎么来的？
'Swiper' JS 库允许设置 'slidesPerView'（例如等于 5），但是一旦应用，无论屏幕尺寸如何，它都会保持原样。
我想根据设备的 screenWidth/screenHeight 设置一个 blockWidth/blockHeight，它总是在 readability/usability 的范围内应用（例如，当屏幕宽度为 1127 像素，应显示最大数量的块，可以是 5、6、7 或者可能只有 4）。因此，我想动态设置 blockWidth/blockHeight 而不是必须输入 slidesPerView，这现在导致在调整屏幕大小时更改 blockWidth/blockHeight 以遵守 slidesPerView = 5.
当前解决方案：我将'.swiper-container'中的"width: 100%;"更改为"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>
有什么想法吗？谢谢！
这是您给滑动元素设置的边框造成的。这些搞乱了 Swiper 计算宽度和允许滚动的距离的方式。在滑动条内的所有元素上设置 box-sizing: border-box 以处理此问题。
我在您的代码中找不到与此相关的任何内容。你不是 displaying/logging 任何地方的图像尺寸。或者可能只是不清楚 "when in memory"
Swiper 默认值 CSS 设置 margin-left: auto 和 margin-right: auto。您必须覆盖它以删除边距。我还建议使用 display: flex.
为了固定宽度的幻灯片，在 Swiper 配置中设置 slidesPerView: 'auto' 并为您的 .swiper-slide 元素，您甚至可以通过 CSS 媒体查询断点进行更改。滑动器将在调整大小时自动适应。 （单击 运行 之后 Stack Snippet 下面的 "Full page" link 并将浏览器的大小 window 调整到 700px 宽度以下进行演示。）
但是，这会导致每个滑动器中最后一张幻灯片的右边框被切断，即使滚动到尽可能向右也是如此。我通过向每个 .swiper-slide:last-child.
添加 margin-right: 1px 来解决这个问题
您还可以使用 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>
我正在 HTML/JS/CSS 制作原型，尝试构建以下内容：
不幸的是，我在 CSS 部分苦苦挣扎。您可以在下面找到一个功能齐全但包含 4 个问题的最小实现：
从幻灯片 1 --> 幻灯片 19 滚动时，我只能滚动到幻灯片 19 的一半。怎么回事？我想完整地查看幻灯片 19。
我上传了一张 512x512 的图片，在内存中生成了一张 285x285 的图片。怎么来的？
我无法使用 'display: inline' 将两个 div：
<div class="swiper-slide0">First Color</div>和<div class="swiper-container">放在一条线上（参见最终结果的可视化）。怎么来的？'Swiper' JS 库允许设置 'slidesPerView'（例如等于 5），但是一旦应用，无论屏幕尺寸如何，它都会保持原样。
我想根据设备的 screenWidth/screenHeight 设置一个 blockWidth/blockHeight，它总是在 readability/usability 的范围内应用（例如，当屏幕宽度为 1127 像素，应显示最大数量的块，可以是 5、6、7 或者可能只有 4）。因此，我想动态设置 blockWidth/blockHeight 而不是必须输入 slidesPerView，这现在导致在调整屏幕大小时更改 blockWidth/blockHeight 以遵守 slidesPerView = 5.
当前解决方案：我将'.swiper-container'中的"width: 100%;"更改为"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>
有什么想法吗？谢谢！
这是您给滑动元素设置的边框造成的。这些搞乱了
Swiper计算宽度和允许滚动的距离的方式。在滑动条内的所有元素上设置box-sizing: border-box以处理此问题。我在您的代码中找不到与此相关的任何内容。你不是 displaying/logging 任何地方的图像尺寸。或者可能只是不清楚 "when in memory"
的意思
Swiper默认值 CSS 设置margin-left: auto和margin-right: auto。您必须覆盖它以删除边距。我还建议使用display: flex. 对齐行项目
为了固定宽度的幻灯片，在
Swiper配置中设置slidesPerView: 'auto'并为您的.swiper-slide元素，您甚至可以通过 CSS 媒体查询断点进行更改。滑动器将在调整大小时自动适应。 （单击 运行 之后 Stack Snippet 下面的 "Full page" link 并将浏览器的大小 window 调整到 700px 宽度以下进行演示。）但是，这会导致每个滑动器中最后一张幻灯片的右边框被切断，即使滚动到尽可能向右也是如此。我通过向每个
添加.swiper-slide:last-child.margin-right: 1px来解决这个问题您还可以使用
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>