Guten Tag,
ich habe mit folgendem Code einen Slider erzeugt.
<!DOCTYPE html>
<html>
<head>
<title> 3D image slideshow</title>
<style>
.slideshow{
margin:0 auto;
padding-top:50px;
height:700px;
background:skyblue;
box-sizing:border-box;
}
.content{
margin:auto;
width:190px;
perspective:1000px;
position:relative;
padding-top:80px;
}
.content-carrousel{
width:100%;
position:absolute;
float:right;
animation:rotar 15s infinite linear;
transform-style:preserve-3d;
}
.content-carrousel:hover{
animation-play-state:paused;
cursor:pointer;
}
.content-carrousel figure{
width:100%;
height:120px;
border:1px solid #4d444d;
overflow:hidden;
position:absolute;
}
.content-carrousel figure:nth-child(1){
transform:rotateY(0deg) translateZ(300px);
}
.content-carrousel figure:nth-child(2){
transform:rotateY(40deg) translateZ(300px);
}
.content-carrousel figure:nth-child(3){
transform:rotateY(80deg) translateZ(300px);
}
.content-carrousel figure:nth-child(4){
transform:rotateY(120deg) translateZ(300px);
}
.content-carrousel figure:nth-child(5){
transform:rotateY(160deg) translateZ(300px);
}
.content-carrousel figure:nth-child(6){
transform:rotateY(200deg) translateZ(300px);
}
.content-carrousel figure:nth-child(7){
transform:rotateY(240deg) translateZ(300px);
}
.content-carrousel figure:nth-child(8){
transform:rotateY(280deg) translateZ(300px);
}
.content-carrousel figure:nth-child(9){
transform:rotateY(320deg) translateZ(300px);
}
.shadow{
position:absolute;
box-shadow:0px 0px 20px 0px #000;
border-radius:2px;
}
.content-carrousel img{
image-rendering:auto;
transition:all 300ms;
width:100%;
height:100%;
}
.content-carrousel img:hover{
transform:scale(1.2);
transition:all 300ms;
}
@keyframes rotar{
from{
transform:rotate>(0deg);
} to {
transform:rotateY(360deg);
}
}
</style>
</head>
<body>
<section class ="slideshow">
<div class ="content">
<div class ="content-carrousel">
<figure class ="shadow"><img src ="image1.jpg"></figure>
<figure class ="shadow"><img src ="image2.jpg"></figure>
<figure class ="shadow"><img src ="image3.jpg"></figure>
<figure class ="shadow"><img src ="image4.jpg"></figure>
<figure class ="shadow"><img src ="image5.jpg"></figure>
<figure class ="shadow"><img src ="image6.jpg"></figure>
<figure class ="shadow"><img src ="image7.jpg"></figure>
<figure class ="shadow"><img src ="image8.jpg"></figure>
<figure class ="shadow"><img src ="image9.jpg"></figure>
</div>
</div>
</section>
</body>
</html>
Wie schaffe ich es nun, dass die Bilder manuell ablaufen, d.h. per Maus steuerbar, und statt der Bilder auch Texte oder Seiten als Inhalt sind.