Bildschieber ⇐ CSS

[Anonymous]

Ich habe einen Bildschieberegler erstellt, der nur HTML und CSS verwendet, ohne JavaScript zu verwenden. Es verwendet eine Hash-basierte Bildauswahl und den: Ziel CSS-Selektor, um auf den Hash-Namen zuzugreifen. Aber es wirkt seltsam.

Code: Select all

.slides {
height: 70vh;
width: 30vh;
margin: auto;
border: 2px solid red;
overflow: hidden;
position: relative;
list-style: none;
padding: 0;
}

.slides li {
height: 100%;
width: 100%;
position: absolute;

z-index: 1;
}

.slides li img {
width: 100%;
height: 100%;
}

.thumbnails {
display: flex;
width: 30vh;
margin: auto;
list-style: none;
padding: 0;

}

.thumbnails li {
flex: auto;
}

.thumbnails li img {
width: 100%;

}

.slides li:target {
z-index: 3;
animation: slide 1s 1;
}

.slides li:not(:target) {
animation: hidden 1s 1;
}

@keyframes slide {
0% {
transform: translateX(-100%);
}

100% {
transform: translateX(0%);
}
}

@keyframes hidden {
0% {
z-index: 2;
}

100% {
z-index: 2;
}
}< /code>

[list]
[*]
[img]https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg[/img]
[*]
[img]https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg[/img]
[*]
[img]https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg[/img]
[*]
[img]https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg[/img]
[*]
[img]https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg[/img]
[/list]

[list]
[*]
[url=#slide1]
[img]https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg[/img]
[/url]

[*]
[url=#slide2]
[img]https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg[/img]
[/url]

[*]
[url=#slide3]
[img]https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg[/img]
[/url]

[*]
[url=#slide4]
[img]https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg[/img]
[/url]

[*]
[url=#slide5]
[img]https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg[/img]
[/url]

[/list]