Galerie Anzeige in CSS

Question

Ich habe eine CSS-Galerie Vorlage in meinem HTML-Code hinzugefügt.Dieser Code hat ursprünglich 4 Bilder darin. Ich habe neun weitere Bilder hinzugefügt, aber jetzt bewegt sich der Indikator in dieser Galerie nicht nach 4 Bildern und die Vorschau von anderen neun Bildern ist ebenfalls nicht sichtbar.

Original-CSS-Code: https://bootsnipp.com/snippets/2oko1

Hier ist der HTML-Code:

<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> 

Hier CSS ist:

.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); 
    } 
} 

Answer 1

Es ist schwer zu sagen, wenn ich nicht sehen Sie Ihr Beispiel läuft, aber ich denke, das Problem ist, dass Sie nicht inkrementiert haben Die transform: translate Eigenschaft in gallery input#image-x Selektoren nach der Anzahl der Folien.

Wenn Sie die ersten 4 Regeln beachten, erhöht sich der Prozentsatz in 100% in jeder Regel, aber in der fünften Regel bleibt die transform Eigenschaft in 300%.

Ich hoffe, es hilft Ihnen.