[英]gallery indicator in css
I have added a CSS gallery template in my html code.That code originally has 4 images in it. 我在html代码中添加了一个CSS画廊模板,该代码原本包含4张图片。 I added nine more images but now the indicator in that gallery does not move after 4 images and preview of other nine images is also not visible. 我又添加了九张图像,但是现在该图库中的指示符在四张图像之后不会移动,并且其他九张图像的预览也不可见。
Original CSS code: https://bootsnipp.com/snippets/2oko1 原始CSS代码: https : //bootsnipp.com/snippets/2oko1
Here is the html code: 这是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>
Here is CSS: 这是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);
}
}
It's difficult to say if I don't see your example running, but I think the problem is that you have not incremented the transform: translate
property in gallery input#image-x
selectors according to the number of slides. 很难说我是否看不到您的示例正在运行,但是我认为问题是您没有根据幻灯片的数量增加transform: translate
在gallery input#image-x
选择器中transform: translate
属性。
If you pay attention to the first 4 rules, the percentage increases in 100 per cent in each rule, but in the fifth rule the transform
property remain in 300%. 如果注意前四个规则,则每个规则中的百分比将增加100%,但是在第五个规则中, transform
属性将保持在300%。
Hope it helps you. 希望对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.