【发布时间】：2021-07-25 15:09:58
【问题描述】：
由于我对更高级的 CSS/HTML 缺乏经验，我从 Codepen.io 中挑选了一个纯 CSS/HTML 滑块并进行了艰苦的试验，因此它看起来（大部分）如我所愿。如果可能的话，我想继续使用它。我无法做出的两个改变是：
-
让同步的图像标题在滑块下方居中显示，而不是在滑块上方居中。
-
在滑块的左侧和右侧外添加上一个和下一个按钮。注意：如果您单击滑块下方的缩略图，则可以使用键盘箭头键执行上一个和下一个，因此该功能已经存在。
我的 CSS/HTML 代码在这里： https://codepen.io/Photog/pen/MWmreya 注意：我知道滑块在 Codepen 中看起来太大了，我已经包含了缩略图。我的实际图像看起来不错。 我已经添加了 cmets 来表明我尝试过但没有奏效。
/* : is for a pseudo-class. :root matches the HTML element */
/* Define variables for colors */
:root {
--bgnormal: black;
--fgnormal: white;
--bordercolor: gray;
margin: 0;
padding: 0;
}
/* ========================================= *
Modification of
https://codepen.io/ig_design/full/NWxwBvw
https://codepen.io/ig_design/pen/NWxwBvw
* ========================================= */
body {
font-weight: 300;
/* between normal and bold=700 */
background-color: var(--bgnormal);
overflow-x: hidden;
}
/* , separates a list of selectors being styled the same way */
body,
caption,
div,
dd,
dl,
dt,
form,
li,
option,
p,
select,
td,
th,
tr,
u {
font-family: Helvetica, Verdana, "Lucida Sans", Tahoma, Arial, "Century Gothic", sans-serif;
font-size: 16px;
line-height: 140%;
color: var(--fgnormal);
}
/* . (leading) means this is a class */
.section {
position: relative;
/* can be positioned relative to its normal position via top, right, bottom, left */
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
text-alignment: center;
}
.slider-height-padding {
padding-top: 100px;
/* Do not reduce this. Current pix are 80px high */
}
/* all radio buttons (thumbnails), checked or not */
/* , separates a list of selectors being styled the same way */
/* : is for a pseudo-class. They show state (e.g., hover, visited, checked) */
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
/* a negative left with position: absolute means set the left edge to a unit to the left of he left edge of its nearest positioned ancestor */
}
/* thumbnail buttons */
/* + ("adjacent sibling combinator") means first you see selector 1 (and its closing) and directly afterward you style selector 2 */
.checkbox:checked+label,
.checkbox:not(:checked)+label {
position: relative;
/* can be positioned relative to its normal position via top, right, bottom, left */
cursor: pointer;
margin: 50px auto;
text-align: center;
margin-right: 6px;
margin-left: 6px;
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid var(--bordercolor);
border-radius: 12px;
background-size: cover;
background-position: center;
opacity: 50%;
/* Not so bright */
box-sizing: border-box;
background-image: url('https://fullbrain.com/images/AAInchBW.jpg');
}
.checkbox.c02+label {
background-image: url('https://fullbrain.com/images/AAInchRestful.jpg');
}
.checkbox.c03+label {
background-image: url('https://fullbrain.com/images/AAInchLively.jpg');
}
.checkbox:checked+label {
opacity: 1;
/* Make the checked button have full intensity/opacity */
}
ul {
position: absolute;
/* can be positioned relative to the nearest positioned ancestor via top, right, bottom, left */
top: 0;
left: 0;
display: block;
width: 100%;
z-index: 100;
padding: 0;
margin: 0;
list-style: none;
}
/* title and box, not thumbnails */
/* space ("descendent selector") means styled selector 2 is enclosed in selector 1 */
ul li {
position: absolute;
/* can be positioned relative to the nearest positioned ancestor via top, right, bottom, left */
top: 0;
/* when I tried bottom: 0, the box disappeared */
left: 0;
width: 100%;
/* auto wasn't good */
height: 120px;
/* IMPORTANT was 400px. At 500px, I see titles above slider. At 800px, slider moves down and covers thumbnails, but title stays. */
display: block;
z-index: 100;
padding: 0;
margin: 0;
list-style: none;
background-size: auto;
background-repeat: no-repeat;
background-position: center;
background-image: url('https://fullbrain.com/images/AAInchBW.jpg');
border: 5px solid var(--bgnormal);
border-radius: 50%;
box-sizing: border-box;
font-weight: bold;
font-size: 20px;
/* This is for the image title */
letter-spacing: 1px;
line-height: 1.5;
color: var(--fgnormal);
opacity: 0;
pointer-events: none;
}
/* I think this is the label */
/* space ("descendent selector") means styled selector 3 is enclosed in selector 2 is enclosed in selector 1 */
ul li span {
mix-blend-mode: normal;
/* was difference */
/* vertical-align: bottom; no-op */
/* position: relative; bottom: 0; is a no-op */
}
/* space ("descendent selector") means styled selector 2 is enclosed in selector 1 */
/* : is for pseudo-classes. They show state (e.g., hover, visited, checked), nth-child is ordinal */
ul li:nth-child(2) {
background-image: url('https://fullbrain.com/images/AAInchRestful.jpg');
}
ul li:nth-child(3) {
background-image: url('https://fullbrain.com/images/AAInchLively.jpg');
}
/* . (leading) means this is a class */
/* . (internal) means is a member of both classes */
/* : is for pseudo-classes. They show state (e.g., hover, visited, checked), nth-child is ordinal */
/* ~ ("subsequent sibling combinator" or "general sibling selector") means first you see selector 1 and then style all selector 2s that follow */
/* space ("descendent selector") means styled selector 2 is enclosed in selector 1 */
.checkbox.c01:checked~ul li:nth-child(1) {
opacity: 1;
/* full intensity/opacity */
pointer-events: auto;
border-radius: 16px;
}
.checkbox.c02:checked~ul li:nth-child(2) {
opacity: 1;
/* full intensity/opacity */
pointer-events: auto;
border-radius: 16px;
}
.checkbox.c03:checked~ul li:nth-child(3) {
opacity: 1;
/* full intensity/opacity */
pointer-events: auto;
border-radius: 16px;
}
a {
cursor: pointer;
}<div class="section slider-height-padding">
<br>
<!-- I have no idea why this text appears BELOW the slider -->
<center>Click a thumbnail below to see the larger image and title.</center>
<input class="checkbox c01" type="radio" name="slider" id="slide-1" checked>
<label for="slide-1"></label>
<input class="checkbox c02" type="radio" name="slider" id="slide-2">
<label for="slide-2"></label>
<input class="checkbox c03" type="radio" name="slider" id="slide-3">
<label for="slide-3"></label>
<ul>
<li><span style="color: white;">Spray-On Beauty</span></li>
<li><span style="color: white;">Dante's Inferno</span></li>
<li><span style="color: yellow;">Boots Made for Walking</span></li>
</ul>
</div>【问题讨论】：