Hi,
ich habe im Web eine reine CSS3 Slideshow gefunden, dass ich etwas modifiziert habe.
Alles funktioniert wunderbar. Ich möchte aber, dass der Slide Show automatisch läuft ohne, dass man irgendwo klicken muss.
Kennt jemand dafür eine loesung?
Das Ganze kann man hier sehen: http://acecars24.com/normal
HTML Code:
CSS Code (slideshow.css):
Danke fuer eure Hilfe.
ich habe im Web eine reine CSS3 Slideshow gefunden, dass ich etwas modifiziert habe.
Alles funktioniert wunderbar. Ich möchte aber, dass der Slide Show automatisch läuft ohne, dass man irgendwo klicken muss.
Kennt jemand dafür eine loesung?
Das Ganze kann man hier sehen: http://acecars24.com/normal
HTML Code:
Code:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width">
<title>CSS3 Slideshow</title>
<!-- CSS -->
<link href="css/slideshow.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>
<body class="preload">
<article id=slider>
<!-- Slider Setup -->
<!-- somit ermittlen wir die Werte. Gestartet wird mit slide1. Die eigentliche Input felder werden allerdings durch CSS versteckt -->
<input type=radio name=slider id="slide1" checked />
<input type=radio name=slider id="slide2" />
<input type=radio name=slider id="slide3" />
<input type=radio name=slider id="slide4" />
<input type=radio name=slider id="slide5" />
<!-- The Slider -->
<div id=slides>
<div id="overflow">
<div class=inner>
<article>
<div class=info>
The Travel Corporation offers:<h3>Boutique Hotels</h3>
Guests choose our luxury 4 and 5-star boutique hotels to experience exceptional hospitality, with immaculate attention to detail.<br>
<a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
</div>
<img src="images/01.jpg" alt="Travel Corporation" />
</article>
<article>
<div class=info>
The Travel Corporation offers:<h3>Coach Charters</h3>
We can arrange special group charters and coach only charters - our specialist Group Services teams are ready to help.<br>
<a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
</div>
<img src="images/02.jpg" alt="Travel Corporation" />
</article>
<article>
<div class=info>
The Travel Corporation offers:<h3>Couples Travel</h3>
Travelling as two? We create amazing travel experiences you can share and talk about together for years to come.<br>
<a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
</div>
<img src="images/03.jpg" alt="Travel Corporation" />
</article>
<article>
<div class=info>
The Travel Corporation offers:<h3>Safari Travel</h3>
One common thread runs across all our Safari trips - a passion to share wild and natural places with our guests in a responsible manner.<br>
<a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
</div>
<img src="images/04.jpg" alt="Travel Corporation" />
</article>
<article>
<div class=info>
The Travel Corporation offers:<h3>Youth Travel</h3>
We are passionate about creating enriching experiences for young travelers who want to grow through travel and enjoy themselves, while increasing their awareness of diverse cultures.<br>
<a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
</div>
<img src="images/05.jpg" alt="Travel Corporation" />
</article>
</div> <!-- .inner -->
</div> <!-- #overflow -->
</div> <!-- #slides -->
<!-- Controls and Active Slide Display -->
<div id=controls>
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div> <!-- #controls -->
<div id=active>
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div> <!-- #active -->
</article> <!-- #slider -->
</body>
</html>CSS Code (slideshow.css):
Code:
body {
font: 14px/22px Arial, Helvetica, sans-serif;
color: #333;
background: url(../images/background.png);
margin: 10px auto;
overflow-x: hidden;
width: 960px;
}
label, a {
color: teal;
cursor: pointer;
text-decoration: none;
}
label:hover, a:hover {
color: #000 !important;
}
/* Slider Setup */
input {
display: none;
}
#slide1:checked ~ #slides .inner {
margin-left: 0;
}
#slide2:checked ~ #slides .inner {
margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
margin-left: -200%;
}
#slide4:checked ~ #slides .inner {
margin-left: -300%;
}
#slide5:checked ~ #slides .inner {
margin-left: -400%;
}
#overflow {
width: 100%; !important;
overflow: hidden;
}
/* Info Box */
.info {
line-height: 20px;
margin: 0 -10% 0 680px;
position: absolute; !important;
padding: 30px 0px;
opacity: 0;
color: #fff;
text-align: left;
width: 220px;
}
.info h3 {
color: #fff;
margin: 15px 0 15px;
font-weight: normal;
font-size: 22px;
font-style: normal;
}
.readmore {
padding: 20px 0px;
}
#slides .inner {
width: 500%;
line-height: 0;
}
#slides article {
width: 20%;
float: left; !important;
}
/* Slider Styling */
/* Control Setup */
#controls {
margin: -25% 0 0 0;
width: 100%;
height: 50px;
}
#controls label {
display: none;
width: 50px;
height: 50px;
opacity: 0.3;
}
#active {
margin: 23% 0 0;
text-align: center;
}
#active label {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
background: #bbb;
}
#active label:hover {
background: #ccc;
border-color: #777 !important;
}
#controls label:hover {
opacity: 0.8;
}
#slide1:checked ~ #active label:nth-child(1), #slide2:checked ~ #active label:nth-child(2), #slide3:checked ~ #active label:nth-child(3), #slide4:checked ~ #active label:nth-child(4), #slide5:checked ~ #active label:nth-child(5) {
background: #333;
border-color: #333 !important;
}
/* Next Button */
#slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(5), #slide5:checked ~ #controls label:nth-child(1) {
background: url('../images/next.png') no-repeat;
float: right;
margin: 5% -45px 0 0;
display: block;
}
/* Previous Button */
#slide1:checked ~ #controls label:nth-child(5), #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3), #slide5:checked ~ #controls label:nth-child(4) {
background: url('../images/prev.png') no-repeat;
float: left;
margin: 5% 0 0 -45px;
display: block;
}
/* Image Background */
#slides {
box-shadow: 1px 1px 4px #666;
background: url(../images/slideshow-background.jpg);
min-height: 297px;
}
/* Animation */
/* Moving from right to left */
#slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
/* Text Transition */
#slide1:checked ~ #slides article:nth-child(1) .info, #slide2:checked ~ #slides article:nth-child(2) .info, #slide3:checked ~ #slides article:nth-child(3) .info, #slide4:checked ~ #slides article:nth-child(4) .info, #slide5:checked ~ #slides article:nth-child(5) .info {
opacity: 1;
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;
}Danke fuer eure Hilfe.
Zuletzt bearbeitet:
