【发布时间】：2021-01-21 17:09:28
【问题描述】：
我正在尝试使用 React + Javascript 从头开始制作 carousel/slider。我认为有两层会很好。其中一个超过另一个。上层将填充窗口，我们可以在其中看到位于底部的层的元素。
上层
- id 是#window-container
- 只有 3 列。（中间列将是滑块的窗口。其他两列将被隐藏。每个网格的边框都涂有颜色。）
底层
- id 是#slider-container。
- 有 4 列，但可以获得 10、20、100 或无限列。每列的背景都有不同的颜色。
我希望上层和底层的列宽相等，但现在不一样。
无论底层有多少列，如何使它们相等？
你可以在这里查看我的开发：
body {
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
text-align: center;
}
/*****************************************************/
/******************** Container **********************/
/*****************************************************/
.container {
position: relative;
border: 3px solid black;
height: 300px;
width: 100%;
z-index: 0;
}
/*****************************************************/
/***************** Slider Container ******************/
/*****************************************************/
.slider-container {
position: absolute;
box-sizing: border-box;
/*background-color: yellow;*/
height: 100%;
z-index: 1;
}
/*****************************************************/
/*************** Window Container ********************/
/*****************************************************/
.window-container {
position: absolute;
box-sizing: border-box;
padding: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
height: 100%;
width: 100%;
z-index: 100;
}
.left {
border: 1px solid green;
grid-column: 1;
}
.right {
border: 1px solid red;
grid-column: 3;
}
#window {
grid-column: 2;
border: 1px solid #000000;
}<!DOCTYPE html>
<html>
<header>
<link rel="stylesheet" href="./css/styles.css">
</header>
<body>
<div>
<h1>Slider Scandiweb</h1>
<div class = "container">
<div class = "slider-container"></div>
<div class = "window-container">
<div class = "left"></div>
<div id="window"></div>
<div class = "right"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
let e = document.querySelector("#window");
//Set slider-container
let elements = 10;
let gap = 10;
let sc = document.querySelector(".slider-container");
//sc.style.backgroundColor = "red";
sc.style.width = e.clientWidth * elements + (elements + 1) * gap + "px";
sc.style.padding = "10px";
sc.style.display = "grid";
sc.style.gridTemplateColumns = "repeat(" + elements + ", 1fr)";
sc.style.gap = "10px";
//sc.style.height = "100%";
//Creations of elements
for (let i = 0; i < elements; i++) {
let div = document.createElement("div");
div.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);;
sc.appendChild(div);
}
</script>
</html>【问题讨论】：
-
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
-
为什么它们必须相等？让下层也有三列宽并将所有图像放在中间层不是更容易吗？但是你甚至不需要中间的下层。
-
上层只有三层，中间层是我设置了交换事件监听的窗口。底层是具有n个元素的层，它比上面的层大。每次向左或向右交换时，我将底层向左或向右移动。我需要底层内部的所有层与上层中的中间层具有相同的宽度。现在，底部的图层稍微向左移动
标签： css reactjs carousel css-grid