3
Ich fand Code online, um ein Karussell nur mit HTML und CSS zu erstellen. Ich habe es geschafft, 2 weitere Folien (Folien 4 & 5) hinzuzufügen, aber auf diesen beiden Folien ist der linke Pfeil nach rechts gerichtet. Ich kann nicht herausfinden, was ich falsch gemacht habe. Kann mir jemand in die richtige Richtung zeigen? Alles hilft, danke.HTML und CSS-Karussell Ausgabe
<style>
.carousel {
border-style:solid;
border-width:1px;
border-color:rgba(0, 0, 0, 0.05);
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
widht:100%;
height:250px;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
height:250px;
}
.carousel-open:checked + .carousel-item {
position: absolute;
opacity: 100;
background-color:white;
width:100%;
height:250px;
}
.carousel-item {
position: absolute;
opacity: 0;
padding-top:10px;
text-align:center;
}
.carousel-control {
background: rgba(0, 0, 0, 0);
border-radius: 50%;
color:#008c6c;
cursor: pointer;
display: none;
font-size: 30px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.05);
color: #008c6c;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3,
#carousel-4:checked ~ .control-4,
#carousel-5:checked ~ .control-5{
display: block;
}
.carousel-indicators {
margin: 0;
padding: 0;
position: absolute;
bottom: 2px;
left: 0;
right: 0;
text-align: center;
}
.carousel-indicators li {
display: inline-block;
margin: 0 5px;
}
.carousel-bullet {
color: rgba(0, 0, 0, 0.05);
cursor: pointer;
font-size: 25px;
}
.carousel-bullet:hover {
color: rgba(0, 0, 0, 0.1);
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet,
#carousel-4:checked ~ .control-4 ~ .carousel-indicators li:nth-child(4) .carousel-bullet,
#carousel-5:checked ~ .control-5 ~ .carousel-indicators li:nth-child(5) .carousel-bullet{
color: #008c6c;
}
#title {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
</style><div class="carousel">
<div class="carousel-inner">
<input name="carousel" class="carousel-open" id="carousel-1" aria-hidden="true" type="radio" hidden="true" Checked/>
<div class="carousel-item">
<img src="/"/>
</div>
<input name="carousel" class="carousel-open" id="carousel-2" aria-hidden="true" type="radio" hidden="true"/>
<div class="carousel-item">
<h1>2</h1>
<p> Content here for page two.</p>
</div>
<input name="carousel" class="carousel-open" id="carousel-3" aria-hidden="true" type="radio" hidden="true"/>
<div class="carousel-item">
<h1>3</h1>
<p> Content here for page three.</p>
</div>
<input name="carousel" class="carousel-open" id="carousel-4" aria-hidden="true" type="radio" hidden="true"/>
<div class="carousel-item">
<h1>4</h1>
<p> Content here for page four.</p>
</div>
<input name="carousel" class="carousel-open" id="carousel-5" aria-hidden="true" type="radio" hidden="true"/>
<div class="carousel-item">
<h1>5</h1>
<p> Content here for page five.</p>
</div>
<label class="carousel-control prev control-1" for="carousel-5">‹</label>
<label class="carousel-control next control-1" for="carousel-2">›</label>
<label class="carousel-control prev control-2" for="carousel-1">‹</label>
<label class="carousel-control next control-2" for="carousel-3">›</label>
<label class="carousel-control prev control-3" for="carousel-2">‹</label>
<label class="carousel-control next control-3" for="carousel-4">›</label>
<label class="carousel-control prev control-4" for="carousel-3">›</label>
<label class="carousel-control next control-4" for="carousel-5">›</label>
<label class="carousel-control prev control-5" for="carousel-4">›</label>
<label class="carousel-control next control-5" for="carousel-1">›</label>
<ol class="carousel-indicators">
<li>
<label class="carousel-bullet" for="carousel-1">•</label> </li>
<li>
<label class="carousel-bullet" for="carousel-2">•</label> </li>
<li>
<label class="carousel-bullet" for="carousel-3">•</label> </li>
<li>
<label class="carousel-bullet" for="carousel-4">•</label> </li>
<li>
<label class="carousel-bullet" for="carousel-5">•</label> </li>
</ol>
</div>
</div>
Haha, ich sah gerade, und ich bin. Danke vielmals! –