我在我的 html 代码中添加了一个 CSS 图库模板。该代码最初包含 4 张图片。我又添加了 9 张图片,但现在该图库中的指示器在添加 4 张图片后不再移动,并且其他 9 张图片的预览也不可见。
原始 CSS 代码:https://bootsnipp.com/snippets/2oko1
这是html代码:
<div class="carousel">
<input type="radio" id="image1" name="gallery-control" checked>
<input type="radio" id="image2" name="gallery-control">
<input type="radio" id="image3" name="gallery-control">
<input type="radio" id="image4" name="gallery-control">
<input type="radio" id="image5" name="gallery-control">
<input type="radio" id="image6" name="gallery-control">
<input type="radio" id="image7" name="gallery-control">
<input type="radio" id="image8" name="gallery-control">
<input type="radio" id="image9" name="gallery-control">
<input type="radio" id="image10" name="gallery-control">
<input type="radio" id="image11" name="gallery-control">
<input type="radio" id="image12" name="gallery-control">
<input type="radio" id="image13" name="gallery-control">
<input type="checkbox" id="fullscreen" name="gallery-fullscreen-control"/>
<div class="wrap">
<figure>
<label for="fullscreen">
<img src="a1.jpg" alt="image1"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="a2.jpg" alt="image2"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="a3.jpg" alt="image3" />
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="a4.jpg" alt="image4"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="a5.jpg" alt="image5"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="a6.jpg" alt="image6"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="a7.jpg" alt="Arfa Singing"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="a8.jpg" alt="Arfa Singing"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="a9.jpg" alt="Arfa Singing"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="a10.jpg" alt="Arfa Singing"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="a11.jpg" alt="Arfa Singing"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="a12.jpg" alt="Arfa Singing"/>
</label>
</figure>
<figure>
<label for="fullscreen">
<img src="a13.jpg" alt="Arfa Singing"/>
</label>
</figure>
</div>
<div class="thumbnails">
<div class="slider"><div class="indicator"></div></div>
<label for="image1" class="thumb" style="background-image: url('a1.jpg')"></label>
<label for="image2" class="thumb" style="background-image: url('a2.jpg')"></label>
<label for="image3" class="thumb" style="background-image: url('a3.jpg')"></label>
<label for="image4" class="thumb" style="background-image: url('a4.jpg')"></label>
<label for="image5" class="thumb" style="background-image: url('a5.jpg')"></label>
<label for="image6" class="thumb" style="background-image: url('a6.jpg')"></label>
<label for="image7" class="thumb" style="background-image: url('a7.jpg')"></label>
<label for="image8" class="thumb" style="background-image: url('a8.jpg')"></label>
<label for="image9" class="thumb" style="background-image: url('a9.jpg')"></label>
<label for="image10" class="thumb" style="background-image: url('a10.jpg')"></label>
<label for="image11" class="thumb" style="background-image: url('a11.jpg')"></label>
<label for="image12" class="thumb" style="background-image: url('a12.jpg')"></label>
<label for="image13" class="thumb" style="background-image: url('a13.jpg')"></label>
</div>
这是 CSS:
.gallery {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: relative;
background: white;
width: 70%;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
border-radius: 5px;
}
.gallery input[name$="control"] {
display: none;
}
.gallery .carousel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: relative;
height: 70vh;
width: 100%;
}
.gallery .wrap {
width: 100%;
height: 100%;
position: static;
margin: 0 auto;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
margin-right: 20px;
}
.gallery .wrap figure {
padding: 10px;
height: 100%;
min-width: 100%;
-webkit-transition: opacity 0.25s ease-in-out 0.05s;
transition: opacity 0.25s ease-in-out 0.05s;
position: relative;
left: 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-sizing: border-box;
text-align: center;
margin: 0;
display: block;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 1;
}
.gallery .wrap figure label {
cursor: zoom-in;
height: auto;
width: 100%;
height: 100%;
position: relative;
display: block;
}
.gallery .wrap figure img {
cursor: inherit;
height: auto;
max-width: 100%;
max-height: 100%;
border-radius: 3px;
margin: 0 auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.gallery .thumbnails {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 60px;
max-height: 100%;
height: auto;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-item-align: center;
align-self: center;
-ms-flex-preferred-size: auto;
flex-basis: auto;
position: relative;
white-space: nowrap;
overflow: hidden;
overflow-y: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0 10px;
z-index: 20;
}
.gallery .thumbnails .thumb {
min-width: 60px;
height: 60px;
background-position: center center;
background-size: cover;
box-sizing: border-box;
opacity: 0.7;
margin: 5px 0;
-ms-flex-negative: 0;
flex-shrink: 0;
left: 0;
border-radius: 3px;
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-repeat: no-repeat;
}
.gallery .thumbnails .slider {
position: absolute;
display: block;
width: 5px;
height: calc(60px + 10px);
z-index: 2;
margin: 0;
left: 0;
-webkit-transition: all 0.33s cubic-bezier(0.3, 0, 0.33, 1);
transition: all 0.33s cubic-bezier(0.3, 0, 0.33, 1);
}
.gallery .thumbnails .slider .indicator {
width: 100%;
height: 30px;
max-height: calc(100% - 10px);
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: #428BFF;
border-radius: 1px;
}
.gallery input#fullscreen:checked ~ .wrap figure {
position: fixed;
z-index: 10;
height: 100vh;
width: 100vw;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) !important;
transform: translate(-50%, -50%) !important;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.gallery input#fullscreen:checked ~ .wrap figure label {
cursor: zoom-out;
}
.gallery input#fullscreen:checked ~ .wrap figure label img {
-webkit-animation: shadow 0.2s;
animation: shadow 0.2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-direction: forwards;
animation-direction: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
border-radius: 0;
}
.gallery input#image1:checked ~ .wrap figure {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.gallery input#image1:checked ~ .wrap figure:not(:nth-of-type(1)) {
opacity: 0;
}
.gallery input#image1:checked ~ .thumbnails .slider {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.gallery input#image1:checked ~ .thumbnails .thumb:nth-of-type(1) {
opacity: 1;
cursor: default;
}
.gallery input#image2:checked ~ .wrap figure {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.gallery input#image2:checked ~ .wrap figure:not(:nth-of-type(2)) {
opacity: 0;
}
.gallery input#image2:checked ~ .thumbnails .slider {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.gallery input#image2:checked ~ .thumbnails .thumb:nth-of-type(2) {
opacity: 1;
cursor: default;
}
.gallery input#image3:checked ~ .wrap figure {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
.gallery input#image3:checked ~ .wrap figure:not(:nth-of-type(3)) {
opacity: 0;
}
.gallery input#image3:checked ~ .thumbnails .slider {
-webkit-transform: translateY(200%);
transform: translateY(200%);
}
.gallery input#image3:checked ~ .thumbnails .thumb:nth-of-type(3) {
opacity: 1;
cursor: default;
}
.gallery input#image4:checked ~ .wrap figure {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.gallery input#image4:checked ~ .wrap figure:not(:nth-of-type(4)) {
opacity: 0;
}
.gallery input#image4:checked ~ .thumbnails .slider {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.gallery input#image4:checked ~ .thumbnails .thumb:nth-of-type(4) {
opacity: 1;
cursor: default;
}
.gallery input#image5:checked ~ .wrap figure {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.gallery input#image5:checked ~ .wrap figure:not(:nth-of-type(5)) {
opacity: 0;
}
.gallery input#image5:checked ~ .thumbnails .slider {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.gallery input#image5:checked ~ .thumbnails .thumb:nth-of-type(5) {
opacity: 1;
cursor: default;
}
.gallery input#image6:checked ~ .wrap figure {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.gallery input#image6:checked ~ .wrap figure:not(:nth-of-type(6)) {
opacity: 0;
}
.gallery input#image6:checked ~ .thumbnails .slider {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.gallery input#image6:checked ~ .thumbnails .thumb:nth-of-type(6) {
opacity: 1;
cursor: default;
}
.gallery input#image7:checked ~ .wrap figure {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.gallery input#image7:checked ~ .wrap figure:not(:nth-of-type(7)) {
opacity: 0;
}
.gallery input#image7:checked ~ .thumbnails .slider {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.gallery input#image7:checked ~ .thumbnails .thumb:nth-of-type(7) {
opacity: 1;
cursor: default;
}
.gallery input#image8:checked ~ .wrap figure {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.gallery input#image8:checked ~ .wrap figure:not(:nth-of-type(8)) {
opacity: 0;
}
.gallery input#image8:checked ~ .thumbnails .slider {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.gallery input#image8:checked ~ .thumbnails .thumb:nth-of-type(8) {
opacity: 1;
cursor: default;
}
.gallery input#image9:checked ~ .wrap figure {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.gallery input#image9:checked ~ .wrap figure:not(:nth-of-type(9)) {
opacity: 0;
}
.gallery input#image9:checked ~ .thumbnails .slider {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.gallery input#image9:checked ~ .thumbnails .thumb:nth-of-type(9) {
opacity: 1;
cursor: default;
}
.gallery input#image10:checked ~ .wrap figure {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.gallery input#image10:checked ~ .wrap figure:not(:nth-of-type(10)) {
opacity: 0;
}
.gallery input#image10:checked ~ .thumbnails .slider {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.gallery input#image10:checked ~ .thumbnails .thumb:nth-of-type(10) {
opacity: 1;
cursor: default;
}
.gallery input#image11:checked ~ .wrap figure {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.gallery input#image11:checked ~ .wrap figure:not(:nth-of-type(11)) {
opacity: 0;
}
.gallery input#image11:checked ~ .thumbnails .slider {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.gallery input#image11:checked ~ .thumbnails .thumb:nth-of-type(11) {
opacity: 1;
cursor: default;
}
.gallery input#image12:checked ~ .wrap figure {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.gallery input#image12:checked ~ .wrap figure:not(:nth-of-type(12)) {
opacity: 0;
}
.gallery input#image12:checked ~ .thumbnails .slider {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.gallery input#image12:checked ~ .thumbnails .thumb:nth-of-type(12) {
opacity: 1;
cursor: default;
}
.gallery input#image13:checked ~ .wrap figure {
-webkit-transform: translateX(-300%);
transform: translateX(-300%);
}
.gallery input#image13:checked ~ .wrap figure:not(:nth-of-type(13)) {
opacity: 0;
}
.gallery input#image13:checked ~ .thumbnails .slider {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.gallery input#image13:checked ~ .thumbnails .thumb:nth-of-type(13) {
opacity: 1;
cursor: default;
}
@-webkit-keyframes full {
from {
-webkit-transform: translate(-50%, -50%) scale(0.8);
transform: translate(-50%, -50%) scale(0.8);
}
to {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes full {
from {
-webkit-transform: translate(-50%, -50%) scale(0.8);
transform: translate(-50%, -50%) scale(0.8);
}
to {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
@-webkit-keyframes shadow {
from {
box-shadow: 0 0 0 100vmin rgba(24, 33, 45, 0), 0 0 10vmin rgba(13, 21, 31, 0);
}
to {
box-shadow: 0 0 0 100vmin rgba(24, 33, 45, 0.6), 0 0 10vmin rgba(13, 21, 31, 0.6);
}
}
@keyframes shadow {
from {
box-shadow: 0 0 0 100vmin rgba(24, 33, 45, 0), 0 0 10vmin rgba(13, 21, 31, 0);
}
to {
box-shadow: 0 0 0 100vmin rgba(24, 33, 45, 0.6), 0 0 10vmin rgba(13, 21, 31, 0.6);
}
}
最佳答案
如果我没有看到您的示例正在运行很难说,但我认为问题是您没有在 gallery input#image-x 中增加
根据幻灯片的数量选择器。transform: translate
属性
如果您注意前 4 条规则,每条规则的百分比都会增加 100%,但在第五条规则中,transform
属性保持在 300%。
希望对你有帮助。
关于javascript - CSS 中的图库指示器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45933358/