Ergebnis 1 bis 7 von 7
  1. #1
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    Reine CSS Slide Show mit einem Fehler!

    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:
    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.
    Geändert von bigtail (20-10-2012 um 21:00 Uhr)

  2. #2
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    AW: Reine CSS Slide Show mit einem Fehler!

    Ich suche nun nach einem Weg, so dass Slide Show automatisch startet.
    Kennt jemand eine Lösung ?
    Geändert von bigtail (20-10-2012 um 21:02 Uhr)

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Reine CSS Slide Show mit einem Fehler!

    Kannst du einen Testlink machen?

  4. #4
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    AW: Reine CSS Slide Show mit einem Fehler!

    Hallo kkapsner,

    Danke für deine Antwort.
    Ich habe das Problem inzwischen selbst gelöst.

    Die andere Frage, die ich habe, ist wie folgt:
    Im Moment ist es so, dass ich erst mal auf eine Schaltfläche klicken muss damit sich ein Bild bewegt.
    Ich suche einen Weg, dass wenn die Seite aufgerufen wird, die Bilder sich automatisch austauschen ohne dass man etwas tun muss.

    Kennst du dafür eine Lösung?

    Der Link ist: CSS3 Slideshow

    Danke

  5. #5
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Reine CSS Slide Show mit einem Fehler!

    Denke das wird ohne JavaScript nicht funtkionieren.
    Hoffe ich konnte helfen

  6. #6
    bigtail ist offline Mitglied
    registriert
    14-11-2004
    Beiträge
    28

    AW: Reine CSS Slide Show mit einem Fehler!

    Ich wäre auch über eine Lösung mit JavaScript dankbar.

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Reine CSS Slide Show mit einem Fehler!

    Du könntest den "checked"-Status der Checkboxen per JS über window.setTimeout() oder window.setInterval() ändern um eine automatische Diaschau zu bekommen. Die Grundfunktionalität mit CSS3 wäre dann immer noch die Gleichen.

Ähnliche Themen

  1. Problem bei LoF Article Slide Show (js)
    Von MattRWN im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 08-07-2011, 23:57
  2. javascript slide show
    Von banditqueen im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 07-04-2011, 11:55
  3. Slide-Show - Table komplett ausfüllen...
    Von Odiii im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 06-01-2009, 09:53
  4. Slide-Show-Bildverhältnis
    Von Dini im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 02-09-2005, 13:25
  5. Problem mit slide show
    Von fjoerdman im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 14-03-2003, 09:29

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •