below is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
</head>
<body>
<article id=slider>
<!-- Slider Setup -->
<input checked type=radio name=slider id=slide1 />
<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><h3>Cloud Dragon</h3> by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a></div>
<img src=http://csscience.com/responsiveslidercss3/CouldDragonByBjzaba.png />
</article>
<article>
<div class=info><h3>Mountain Fort</h3> by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a></div>
<img src=http://csscience.com/responsiveslidercss3/MountainFortByBjzaba.png />
</article>
<article>
<div class=info><h3>Mountain Outpost</h3> by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a></div>
<img src=http://csscience.com/responsiveslidercss3/MountainOutpostByBjzaba.png />
</article>
<article>
<div class=info><h3>Cliffs</h3> by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a></div>
<img src=http://csscience.com/responsiveslidercss3/CliffsByBjzaba.png />
</article>
<article>
<div class=info><h3>Hill Fort</h3> by <a href="http://voyager3.tumblr.com">Brendan Zabarauskas</a></div>
<img src=http://csscience.com/responsiveslidercss3/HillFortByBjzaba.png />
</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>
below is the css
label, a {
cursor: pointer;
text-decoration: none;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
label, #active, img {
-moz-user-select: none;
-webkit-user-select: none;
}
#slider {
margin: 0 auto;
}
/* NEW EXPERIMENT */
/* 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%;
overflow: hidden;
}
article img {
width: 100%;
}
#slides .inner {
width: 500%;
}
#slides article {
width: 20%;
float: left;
}
/* Slider Styling */
/* Control Setup */
#controls {
margin: -25% 0 0 0;
width: 100%;
height: 50px;
}
#controls label {
width: 50px;
height: 50px;
opacity: 0.3;
}
#controls label:hover {
opacity: 0.8;
}
#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("http://csscience.com/responsiveslidercss3/next.png") no-repeat;
float: right;
margin: 0 -70px 0 0;
display: block;
}
#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("http://csscience.com/responsiveslidercss3/prev.png") no-repeat;
float: left;
margin: 0 0 0 -70px;
display: block;
}
/* Info Box */
.info {
line-height: 20px;
margin: 0 0 -150%;
position: absolute;
padding: 30px 30px;
opacity: 0;
text-align: left;
}
.info h3 {
margin: 0 0 5px;
font-size: 22px;
font-style: normal;
}
/* Animation */
#slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-ms-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
/* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-ms-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
/* easeInOutQuart */
}
#slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label {
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
#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;
}
.info, #controls, #slides, #active, #active label, .info h3 {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
/* Responsive Styling */
@media only screen and (max-width: 850px) and (min-width: 450px) {
#slider #controls {
margin: -25% 0 0 15%;
width: 70%;
height: 50px;
}
#slider #controls label {
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
@media only screen and (max-width: 450px) {
#slider #controls {
margin: -28% 0 0 24%;
width: 50%;
height: 50px;
}
#slider #slides {
padding: 1% 0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#slider #controls label {
-moz-transform: scale(0.6);
-webkit-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
}
}
@media only screen and (min-width: 850px) {
body {
padding: 0 80px;
}
}
My goal is to implement a carousel with auto-slide and manual slide by clicking on the arrow. My question is using without using javascript is it possible to implement auto-slide. I have tried with animation infinite but it is not working it seems.
Aucun commentaire:
Enregistrer un commentaire