如何解决需要帮助移动标题并将上一个/下一个按钮添加到纯 CSS/HTML 滑块
由于我对更高级的 CSS/HTML 缺乏经验，我从 Codepen.io 中挑选了一个纯 CSS/HTML 滑块，并经过艰苦的试验，使其看起来（大部分）如我所愿。如果可能的话，我想继续使用它。我无法进行的两个更改是：
我的 CSS/HTML 代码在这里： https://codepen.io/Photog/pen/MWmreya 注意：我知道带有缩略图的 Codepen 中的滑块看起来太大了。我的实际图像看起来不错。 我添加了评论以表明我尝试过哪些没有奏效。
/* : 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,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,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,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.,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.,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>解决方法
您可以像这样调整标签跨度的位置。
li span {
position: absolute;
bottom: -13px;
left: 50%;
transform: translateX(-50%);
}
/* : 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,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,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,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.,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.,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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
