html - 添加第 7 张幻灯片时，纯 CSS 幻灯片库出错
问题描述
当我将第七张幻灯片添加到我创建的画廊时，第一张和第七张幻灯片出现了严重问题，我无法弄清楚。基本上，当您单击缩略图时，我只需要它，它们会转到相关幻灯片。
我创建了一个 js 小提琴：
代码如下：
.slider {
max-width: 60em;
margin-left: auto;
margin-right: auto;
position: relative;
}
.slider input {
display: none;
}
/*---- SLIDER STYLING----*/
.slider__slides {
width: 100%;
overflow: hidden;
background: #fff;
transition: all 300ms ease-out;
}
.slider__slides-inner {
transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
width: 600%;
line-height: 0;
}
.slider__slide-item {
width: 16.66667%;
float: left;
position: relative;
}
.slider__slide-img {
width: 100%;
}
/*---- SET POSITION FOR SLIDE ----*/
#slide1:checked ~ .slider__slides .slider__slides-inner {
margin-left: 0%;
}
#slide2:checked ~ .slider__slides .slider__slides-inner {
margin-left: -100%;
}
#slide3:checked ~ .slider__slides .slider__slides-inner {
margin-left: -200%;
}
#slide4:checked ~ .slider__slides .slider__slides-inner {
margin-left: -300%;
}
#slide5:checked ~ .slider__slides .slider__slides-inner {
margin-left: -400%;
}
#slide6:checked ~ .slider__slides .slider__slides-inner {
margin-left: -500%;
}
#slide7:checked ~ .slider__slides .slider__slides-inner {
margin-left: -600%;
}
/*---- SET UP PREV / NEXT CONTROL ----*/
.slider__prev-next-ctrl {
height: 40px;
position: absolute;
top: 42.94%;
width: 100%;
transform: translateY(-50%);
pointer-events: none
}
.slider__prev-next-ctrl label {
display: none;
width: 40px;
height: 40px;
border-radius: 50%;
background: #777;
opacity: 0.7;
transition: opacity 300ms ease-out;
position: relative;
pointer-events: auto
}
.slider__prev-next-ctrl label:hover {
opacity: 1;
cursor: pointer;
}
#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(2),
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(3),
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(4),
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(5),
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(6),
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(7),
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(1) {
display: block;
float: right;
margin-right: 6px;
transform: rotate(-45deg);
}
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(1),
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(2),
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(3),
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(4),
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(5),
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(6),
#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(7)
{
display: block;
float: left;
margin-left: 6px;
transform: rotate(135deg);
}
#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(2)::after,
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(3)::after,
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(4)::after,
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(5)::after,
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(6)::after,
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(7)::after,
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(1)::after,
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(1)::after,
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(2)::after,
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(3)::after,
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(4)::after,
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(5)::after,
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(6)::after,
#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(7)::after{
display: block;
position: absolute;
top: 11px;
left: 11px;
width: 15px;
height: 15px;
content: "";
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
}
/*---- SET UP PIC THUMBNAIL CONTROL ----*/
.slider__pic-ctrl {
text-align: center;
margin-top: 6px
}
.slider__pic-ctrl::after {
display: table;
clear: both;
content: '';
}
.slider__pic-ctrl label {
cursor: pointer;
display: block;
float: left;
width: calc(16.66667% - 5px);
position: relative;
border: 2px solid;
border-color: #fff;
transition: all .3s ease-out;
margin-left: 3px;
margin-right: 3px;
position: relative;
}
.slider__pic-ctrl label.video-icon svg {
width: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
.slider__pic-ctrl label:nth-child(1) {
margin-left: 0
}
.slider__pic-ctrl label:nth-child(7) {
margin-right: 0
}
.slider__pic-ctrl img {
display: block;
}
.slider__pic-ctrl label:hover {
border-color: #777;
}
#slide1:checked ~ .slider__pic-ctrl label:nth-child(1),
#slide2:checked ~ .slider__pic-ctrl label:nth-child(2),
#slide3:checked ~ .slider__pic-ctrl label:nth-child(3),
#slide4:checked ~ .slider__pic-ctrl label:nth-child(4),
#slide5:checked ~ .slider__pic-ctrl label:nth-child(5),
#slide6:checked ~ .slider__pic-ctrl label:nth-child(6),
#slide7:checked ~ .slider__pic-ctrl label:nth-child(7),
{
border-color: #777;
}
.slider__responsive-box {
position: relative;
width: 100%;
height: 0;
padding-bottom: 125%;
}
.slider__responsive-box iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
在第一张幻灯片上我有第一张和第七张幻灯片，在最后一张我什么都没有？
非常感谢
解决方案
您需要更新width的值以容纳 7 个元素而不是 6 个。
内部幻灯片容器变为宽度的 700%，并且 7 个元素中的每一个变为 14.285 的宽度而不是 16.66%。
http://jsfiddle.net/mzs50pck/9/
.slider {
max-width: 60em;
max-width:50vh;/* demo purpose to see it on smaller résolution */
margin-left: auto;
margin-right: auto;
position: relative;
}
.slider input {
display: none;
}
/*---- SLIDER STYLING----*/
.slider__slides {
width: 100%;
overflow: hidden;
background: #fff;
transition: all 300ms ease-out;
}
.slider__slides-inner {
transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
width: 700%;
line-height: 0;
}
.slider__slide-item {
width: 14.285%;
float: left;
position: relative;
}
.slider__slide-img {
width: 100%;
}
/*---- SET POSITION FOR SLIDE ----*/
#slide1:checked ~ .slider__slides .slider__slides-inner {
margin-left: 0%;
}
#slide2:checked ~ .slider__slides .slider__slides-inner {
margin-left: -100%;
}
#slide3:checked ~ .slider__slides .slider__slides-inner {
margin-left: -200%;
}
#slide4:checked ~ .slider__slides .slider__slides-inner {
margin-left: -300%;
}
#slide5:checked ~ .slider__slides .slider__slides-inner {
margin-left: -400%;
}
#slide6:checked ~ .slider__slides .slider__slides-inner {
margin-left: -500%;
}
#slide7:checked ~ .slider__slides .slider__slides-inner {
margin-left: -600%;
}
/*---- SET UP PREV / NEXT CONTROL ----*/
.slider__prev-next-ctrl {
height: 40px;
position: absolute;
top: 42.94%;
width: 100%;
transform: translateY(-50%);
pointer-events: none
}
.slider__prev-next-ctrl label {
display: none;
width: 40px;
height: 40px;
border-radius: 50%;
background: #777;
opacity: 0.7;
transition: opacity 300ms ease-out;
position: relative;
pointer-events: auto
}
.slider__prev-next-ctrl label:hover {
opacity: 1;
cursor: pointer;
}
#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(2),
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(3),
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(4),
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(5),
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(6),
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(7),
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(1) {
display: block;
float: right;
margin-right: 6px;
transform: rotate(-45deg);
}
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(1),
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(2),
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(3),
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(4),
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(5),
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(6),
#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(7)
{
display: block;
float: left;
margin-left: 6px;
transform: rotate(135deg);
}
#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(2)::after,
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(3)::after,
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(4)::after,
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(5)::after,
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(6)::after,
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(7)::after,
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(1)::after,
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(1)::after,
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(2)::after,
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(3)::after,
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(4)::after,
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(5)::after,
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(6)::after,
#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(7)::after{
display: block;
position: absolute;
top: 11px;
left: 11px;
width: 15px;
height: 15px;
content: "";
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
}
/*---- SET UP PIC THUMBNAIL CONTROL ----*/
.slider__pic-ctrl {
text-align: center;
margin-top: 6px
}
.slider__pic-ctrl::after {
display: table;
clear: both;
content: '';
}
.slider__pic-ctrl label {
cursor: pointer;
display: block;
float: left;
width: calc(16.66667% - 5px);
position: relative;
border: 2px solid;
border-color: #fff;
transition: all .3s ease-out;
margin-left: 3px;
margin-right: 3px;
position: relative;
}
.slider__pic-ctrl label.video-icon svg {
width: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
.slider__pic-ctrl label:nth-child(1) {
margin-left: 0
}
.slider__pic-ctrl label:nth-child(7) {
margin-right: 0
}
.slider__pic-ctrl img {
display: block;
}
.slider__pic-ctrl label:hover {
border-color: #777;
}
#slide1:checked ~ .slider__pic-ctrl label:nth-child(1),
#slide2:checked ~ .slider__pic-ctrl label:nth-child(2),
#slide3:checked ~ .slider__pic-ctrl label:nth-child(3),
#slide4:checked ~ .slider__pic-ctrl label:nth-child(4),
#slide5:checked ~ .slider__pic-ctrl label:nth-child(5),
#slide6:checked ~ .slider__pic-ctrl label:nth-child(6),
#slide7:checked ~ .slider__pic-ctrl label:nth-child(7),
{
border-color: #777;
}
.slider__responsive-box {
position: relative;
width: 100%;
height: 0;
padding-bottom: 125%;
}
.slider__responsive-box iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}<div class="slider">
<input checked type=radio name="slider" id="slide1" />
<input type=radio name="slider" id="slide2" />
<input type=radio name="slider" id="slide3" />
<input type=radio name="slider" id="slide4" />
<input type=radio name="slider" id="slide5" />
<input type=radio name="slider" id="slide6" />
<input type=radio name="slider" id="slide7" />
<div class="slider__slides">
<div class="slider__slides-inner">
<div class="slider__slide-item">
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_01.jpg" />
</div>
<div class="slider__slide-item">
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_02.jpg" />
</div>
<div class="slider__slide-item">
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_03.jpg" />
</div>
<div class="slider__slide-item">
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_04.jpg" />
</div>
<div class="slider__slide-item">
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_05.jpg" />
</div>
<div class="slider__slide-item">
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_06.jpg" />
</div>
<div class="slider__slide-item">
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_07.jpg" />
</div>
</div>
</div>
<div class="slider__pic-ctrl">
<label for=slide1>
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_01.jpg" />
</label>
<label for=slide2>
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_02.jpg" />
</label>
<label for=slide3>
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_03.jpg" />
</label>
<label for=slide4>
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_04.jpg" />
</label>
<label for=slide5>
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_05.jpg" />
</label>
<label for=slide6>
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_06.jpg" />
</label>
<label for=slide7>
<img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_07.jpg" />
</label>
</div>
<div class="slider__prev-next-ctrl">
<label for=slide1></label>
<label for=slide2></label>
<label for=slide3></label>
<label for=slide4></label>
<label for=slide5></label>
<label for=slide6></label>
<label for=slide7></label>
</div>
</div>推荐阅读
- django - 解决这个错误：Error loading MySQLdb module: No module named MySQLdb?
- java - 如何使用 Jackson 流 API 将文本解析为 Enum 在运行时因不同枚举类而异？
- laravel - 如何使用 Laravel 设置关系字段的 where 条件？
- android - 尝试扫描条形码时Android应用程序崩溃
- html - getElementByID 返回 null 但 console.log 工作正常
- arrays - 使用嵌套的 JSON 数据渲染反应表
- python - 为什么 PyCharm 不在 HTTPS 中运行烧瓶 webapp？
- ios - 过滤的关系计数未在父视图中更新
- php - 过滤 WP Core 图库块时获取图库标题、图像标题和图库设置
- reactjs - ReactJS：从路由中获取数据并通过父组件将其传递给组件