No replies
bigtail
bigtail's picture
Offline
newbie
Last seen: 7 years 18 weeks ago
Timezone: GMT+1
Joined: 2012-10-20
Posts: 1
Points: 2

Hi,
This is a pure CSS3 slide show.
However I am looking for a way to start the slide show (transition) automaticley without clicking on a button.

You can see an example of the code here: [URL="http://acecars24.com/normal"]http://acecars24.com/normal[/URL]

HTML Code:





	
	
	

	CSS3 Slideshow

	
	



    
    
		
		
        
	
		
		
		
		
		
	
	
		
		
		<div id="slides">
		
            <div id="overflow">
			
				<div class="inner">
				
					
						<div class="info">
                        The Travel Corporation offers:Boutique Hotels 
                        Guests choose our luxury 4 and 5-star boutique hotels to experience exceptional hospitality, with immaculate attention to detail.
                        <a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
                        </div>
                        
						<img src="images/01.jpg" alt="Travel Corporation" />
					
					
					
						<div class="info">
                        The Travel Corporation offers:Coach Charters 
                        We can arrange special group charters and coach only charters - our specialist Group Services teams are ready to help.
                        <a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
                        </div>
                        
						<img src="images/02.jpg" alt="Travel Corporation" />
					
					
					
						<div class="info">
                        The Travel Corporation offers:Couples Travel 
                        Travelling as two? We create amazing travel experiences you can share and talk about together for years to come.
                        <a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
                        </div>
                        
						<img src="images/03.jpg" alt="Travel Corporation" />
					
					
					
						<div class="info">
                        The Travel Corporation offers:Safari Travel 
                        One common thread runs across all our Safari trips - a passion to share wild and natural places with our guests in a responsible manner.
                        <a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
                        </div>
                        
						<img src="images/04.jpg" alt="Travel Corporation" />
					
					
					
						<div class="info">
                        The Travel Corporation offers:Youth Travel 
                        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.
                        <a href="#"><img src="images/button-read-more.png" width="85" class="readmore"></a>
                        </div>
                        
						<img src="images/05.jpg" alt="Travel Corporation" />
					
					
				</div> 
				
			</div> 
		
		</div> 
	
	
		
	
		<div id="controls">

			
			
			
			
			
		
		</div> 
		
		<div id="active">

			
			
			
			
			
			
		</div> 
	
	 



CSS Code (slideshow.css):

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;
}

Thanks for your help.