HTML
<div id="content-slider" class="clr">
<div class="wrap-slider clr">
<h1 class="main-title">(CSS Only) Automatic Slider</h1>
<!-- ========== Thumbnail ControlNav ========== -->
<input type="radio" id="a-1" name="a" >
<input type="radio" id="a-2" name="a" >
<input type="radio" id="a-3" name="a" >
<input type="radio" id="a-4" name="a" >
<nav id="main">
<label for="a-1" class="first"></label>
<label for="a-2" class="first"></label>
<label for="a-3" class="first"></label>
<label for="a-4" class="first"></label>
<!-- <label for="a-5" class="first"></label> -->
</nav>
<nav id="control">
<label for="a-1" ></label>
<label for="a-2" ></label>
<label for="a-3" ></label>
<label for="a-4" ></label>
<!-- <label for="a-5" class="first"></label> -->
</nav>
<!-- ========================================== -->
<!-- Thumbnail Images -->
<span id="b-1" class="th" tabindex="10">
<img src="http://i.imgur.com/DRXiTjC.jpg?1" alt="" id="p-1">
<div class="title-1">
<h1>Mercedes S63 AMG Coupe</h1>
<p>Track test</p>
<a href="#">read more...</a>
</div>
</span>
<span id="b-2" class="th" tabindex="11">
<img src="http://i.imgur.com/h7zrU4y.jpg?1" alt="" id="p-2">
<div class="title-2">
<h1>Mercedes S63 AMG S-Class</h1>
<p>5 spoke ADV5 MV2 CS series wheels</p>
<a href="#">read more...</a>
</div>
</span>
<span id="b-3" class="th" tabindex="12">
<img src="http://i.imgur.com/20TwuaL.jpg?1" alt="" id="p-3">
<div class="title-3">
<h1>BMW M3</h1>
<p>RSR R802 Wheels</p>
<a href="#">read more...</a>
</div>
</span>
<span id="b-4" class="th" tabindex="13">
<img src="http://i.imgur.com/sSRnrlY.jpg?1" alt="" id="p-4">
<div class="title-4">
<h1>Mercedes-AMG GT S</h1>
<p>It's available here</p>
<a href="#">read more...</a>
</div>
</span>
<!-- =============== Images =============== -->
<div class="slider">
<div class="inset">
<figure>
<figcaption class="title-1">
<h1>Mercedes S63 AMG Coupe</h1>
<p>Track test</p>
<a href="#">read more...</a>
</figcaption>
<img src="http://i.imgur.com/qHcfKju.jpg" alt="" id="i-1" class="f">
</figure>
<figure>
<figcaption class="title-2">
<h1>Mercedes S63 AMG S-Class</h1>
<p>5 spoke ADV5 MV2 CS series wheels</p>
<a href="#">read more...</a>
</figcaption>
<img src="http://i.imgur.com/SHifLfY.jpg" alt="" id="i-2" class="f">
</figure>
<figure>
<figcaption class="title-3">
<h1>BMW M3</h1>
<p>RSR R802 Wheels</p>
<a href="#">read more...</a>
</figcaption>
<img src="http://i.imgur.com/1g3BeG9.jpg" alt="" id="i-3" class="f">
</figure>
<figure>
<figcaption class="title-4">
<h1>Mercedes-AMG GT S</h1>
<p>It's available here</p>
<a href="#">read more...</a>
</figcaption>
<img src="http://i.imgur.com/f6jwAyJ.jpg" alt="" id="i-4" class="f">
</figure>
<figure>
<figcaption class="title-5">
<h1>Mercedes S63 AMG Coupe</h1>
<p>Track test</p>
<a href="#">read more...</a>
</figcaption>
<img src="http://i.imgur.com/qHcfKju.jpg" alt="" id="i-5" class="f">
</figure>
</div>
</div>
</div>
</div>
CSS
/*=====================================================
Base
=====================================================*/
#content-slider {
line-height: 1;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 10px; /* font-size 1em = 10px = 62.5%*/
/*background: #4e616d;*/
}
/*=====================================================
Clearfix
=====================================================*/
.clr {
*zoom: 1;
}
.clr:before,
.clr:after {
display: table;
content: "";
line-height: 0;
}
.clr:after {
clear: both;
}
/*=====================================================
Wrapper
=====================================================*/
#content-slider .wrap-slider {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 1200px;
/*max-height: 400px;*/
height: 100%;
width: 100%;
margin: 0px auto;
position: relative;
text-align: right;
}
#content-slider .wrap-slider.full {
width: 100%;
max-width: 100%;
text-align: center;
border: none;
}
/*=====================================================
Links
=====================================================*/
#content-slider *:focus {
outline: 0;
}
#content-slider a:hover {
color: #7FD4FD !important;
text-decoration: underline !important;
}
#content-slider a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
#content-slider a:hover,
#content-slider a:active {
outline: 0;
}
/*=====================================================
Responsive Images
(Ensure images don't scale beyond their parents)
=====================================================*/
#content-slider img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
/*=====================================================
Main
=====================================================*/
#content-slider .slider {
margin-top: 5%;
position: absolute;
overflow: hidden;
width: 100%;
margin: 0 auto;
}
#content-slider .inset {
width: 500%;
line-height: 0;
-webkit-animation: 30s slidy infinite;
-moz-animation: 30s slidy infinite;
-ms-animation: 30s slidy infinite;
-o-animation: 30s slidy infinite;
animation: 30s slidy infinite;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#content-slider h1.main-title {
text-align: center;
color: #00ABFA;
font-weight: 200;
font-size: 32px;
text-transform: uppercase;
line-height: 62px;
letter-spacing: 0.1em;
margin: 5px 0 0px 0;
}
#content-slider .slider [class*='title-'] {
background: rgba(0, 0, 0, 0.51);
padding: 1% 1%;
display: inline-block;
width: 40%;
/*width: 385px;*/
height: auto;
position: absolute;
z-index: 12;
margin: 15px 0 0 15px;
/*margin-bottom: -15%;
left: -65%;*//*
margin-left: -40%;*/
line-height: normal;
overflow: hidden;
text-align: left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#content-slider .th>[class*='title-'] {
width: auto;
height: auto;
position: absolute;
top: 0em;
right: 0em;
text-align: right;
margin: 5px 10px 0 0;
opacity: 1;
line-height: normal;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*=====================================================
Article
=====================================================*/
#content-slider .slider h1,#content-slider .th h1 {
color: #fffefe;
text-transform: uppercase;
padding: 0;
margin: 0;
font-weight: bold;
}
#content-slider .slider p,#content-slider .th p {
color: #fffefe;
text-transform: uppercase;
padding: 0;
margin: 0;
}
#content-slider .slider a,#content-slider .th a {
font-weight: bold;
color: #00ABFA;
text-decoration: none;
text-transform: uppercase;
}
/*=====================================================
Article Image Slider
=====================================================*/
#content-slider .slider h1 { font-size: 3.0em; line-height: 2em; }
#content-slider .slider p { font-size: 2.3em; line-height: 1.2em; }
#content-slider .slider a { font-size: 1.7em; line-height: 1.5em; }
/*=====================================================
Article Image Preview
=====================================================*/
#content-slider .th h1 { font-size: 2em; line-height: 1.2em; }
#content-slider .th p { font-size: 1.2em; line-height: 1.7em; }
#content-slider .th a { font-size: 1.55em; line-height: 1.55em; }
#content-slider .th img {
position: relative;
max-width: 100%;
height: auto !important;
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-ms-filter: brightness(50%);
-o-filter: brightness(50%);
filter: brightness(50%);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#content-slider .th:hover img {
-webkit-filter: brightness(100%);
-moz-filter: brightness(100%);
-ms-filter: brightness(100%);
-o-filter: brightness(100%);
filter: brightness(100%);
}
/*=====================================================
Main Image
=====================================================*/
#content-slider figure {
margin: 0;
padding: 0;
width: 20%;
float: left;
cursor: pointer;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#content-slider figure img {
width: 100%;
position: relative;
}
/*=====================================================
Image Preview
=====================================================*/
#content-slider span.th {
width: 25%;
margin: 34% 0% 0 0%;
float: left;
text-align: center;
display: inline-block;
position: relative;
z-index: 1000;
cursor: pointer;
}
#content-slider input[type='radio'] {
width: 10px;
height: 10px;
display: none;
position: relative;
/*left: 0%;
bottom: 0%;*/
display: none;
}
#control{
position: absolute;
left: 3%;
z-index: 5;
top: 55%;
width: 95%;
}
#content-slider label.first{
width: 9px;
height: 9px;
margin: 33% 1% 0 0%;
/*float: left;*/
text-align: center;
display: inline-block;
position: relative;
z-index: 1000;
cursor: pointer;
border-radius: 100%;
background: #00ABFA;
border: 1px solid transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#content-slider #main>label:after{
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: #fff;
position: absolute;
top: 1px;
left: 1px;
border-radius: 100%;
opacity: 0;
visibility: hidden;
z-index: 9;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#content-slider input[type='radio'] {
width: 10px;
height: 10px;
display: none;
position: relative;
/*left: 0%;
bottom: 0%;*/
display: none;
}
#content-slider #control{
position: absolute;
left: 3%;
z-index: 15;
top: 0%;
width: 95%;
margin-top: 10%;
display: none;
}
#content-slider label.first{
width: 9px;
height: 9px;
/*margin: 33% 1% 0 0%;*/
margin: 0% 1% -30% 0%;
/*float: left;*/
text-align: center;
/*display: inline-block;*/
position: relative;
z-index: 1000;
cursor: pointer;
border-radius: 100%;
background: #00ABFA;
border: 1px solid transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: none;
}
#content-slider #main>label:after{
content: '';
display: inline-block;
width: 7px;
height: 7px;
background: #fff;
position: absolute;
top: 1px;
left: 1px;
border-radius: 100%;
opacity: 0;
visibility: hidden;
z-index: 9;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
/*=====================================================
Controls
=====================================================*/
#main>label:hover { width: 9px; height: 9px; background: #FFF; border: 1px solid #00ABFA; }
input#a-1:checked ~ .slider .inset { margin-left: 0%; }
input#a-2:checked ~ .slider .inset { margin-left:-100%; }
input#a-3:checked ~ .slider .inset { margin-left:-200%; }
input#a-4:checked ~ .slider .inset { margin-left:-300%; }
input#a-5:checked ~ .slider .inset { margin-left:-400%; }
input#a-1:checked ~ #main>label:nth-child(1):after { opacity: 1; visibility: visible; }
input#a-2:checked ~ #main>label:nth-child(2):after { opacity: 1; visibility: visible; }
input#a-3:checked ~ #main>label:nth-child(3):after { opacity: 1; visibility: visible; }
input#a-4:checked ~ #main>label:nth-child(4):after { opacity: 1; visibility: visible; }
input#a-1:checked ~ #control>label:nth-child(2),
input#a-2:checked ~ #control>label:nth-child(3),
input#a-3:checked ~ #control>label:nth-child(4),
input#a-4:checked ~ #control>label:nth-child(1),
input#a-5:checked ~ #control>label:nth-child(1),
input#a-1:checked ~ #control>label:nth-child(4),
input#a-2:checked ~ #control>label:nth-child(1),
input#a-3:checked ~ #control>label:nth-child(2),
input#a-4:checked ~ #control>label:nth-child(3) {
width: 50px;
height: 50px;
top: 12em;
display: inline-block;
position: relative;
cursor: pointer;
}
input#a-1:checked ~ #control>label:nth-child(2),
input#a-2:checked ~ #control>label:nth-child(3),
input#a-3:checked ~ #control>label:nth-child(4),
input#a-4:checked ~ #control>label:nth-child(1) {
background: url(http://i.imgur.com/KSa0AWn.png) no-repeat;
float: right;
right: 0.3%;
}
input#a-1:checked ~ #control>label:nth-child(4),
input#a-2:checked ~ #control>label:nth-child(1),
input#a-3:checked ~ #control>label:nth-child(2),
input#a-4:checked ~ #control>label:nth-child(3) {
background: url(http://i.imgur.com/RVoMEF5.png) no-repeat;
float: left;
left: 0.3%;
}
span#a-1:focus ~ .slider .inset { margin-left: 0%; }
span#a-2:focus ~ .slider .inset { margin-left:-100%; }
span#a-3:focus ~ .slider .inset { margin-left:-200%; }
span#a-4:focus ~ .slider .inset { margin-left:-300%; }
span#a-5:focus ~ .slider .inset { margin-left:-400%; }
span#b-1:focus ~ .slider .inset { margin-left: 0%; }
span#b-2:focus ~ .slider .inset { margin-left:-100%; }
span#b-3:focus ~ .slider .inset { margin-left:-200%; }
span#b-4:focus ~ .slider .inset { margin-left:-300%; }
span#b-5:focus ~ .slider .inset { margin-left:-400%; }
#content-slider input:checked ~ .slider>.inset {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
#content-slider input:hover ~ .slider>.inset, #content-slider label:hover ~ .slider>.inset {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
#content-slider input:hover ~ .slider>.inset, #content-slider label:hover ~ .slider>.inset {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
#content-slider span:focus ~ .slider>.inset {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
#content-slider span:hover ~ .slider>.inset {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
/*=====================================================
Animation Image
=====================================================*/
@keyframes slidy {
20% { margin-left: 0%; }
25% { margin-left: -100%; }
45% { margin-left: -100%; }
50% { margin-left: -200%; }
70% { margin-left: -200%; }
75% { margin-left: -300%; }
95% { margin-left: -300%; }
100% { margin-left: -400%; }
}
@-webkit-keyframes slidy {
20% { margin-left: 0%; }
25% { margin-left: -100%; }
45% { margin-left: -100%; }
50% { margin-left: -200%; }
70% { margin-left: -200%; }
75% { margin-left: -300%; }
95% { margin-left: -300%; }
100% { margin-left: -400%; }
}
@-moz-keyframes slidy {
20% { margin-left: 0%; }
25% { margin-left: -100%; }
45% { margin-left: -100%; }
50% { margin-left: -200%; }
70% { margin-left: -200%; }
75% { margin-left: -300%; }
95% { margin-left: -300%; }
100% { margin-left: -400%; }
}
@-o-keyframes slidy {
20% { margin-left: 0%; }
25% { margin-left: -100%; }
45% { margin-left: -100%; }
50% { margin-left: -200%; }
70% { margin-left: -200%; }
75% { margin-left: -300%; }
95% { margin-left: -300%; }
100% { margin-left: -400%; }
}
@media only screen and (max-width: 1040px) and (min-width: 640px) {
#content-slider .th h1 { font-size: 1.2em; line-height: 1em; }
#content-slider .th p { font-size: 1.0em; line-height: 0.7em; }
#content-slider .th a { font-size: 0.55em; line-height: 0.55em; }
}
/*@media only screen and (max-width: 940px) {
#content-slider .slider [class*='title-'] { margin-bottom: -20%; }
}*/
@media only screen and (max-width: 640px) {
#content-slider .slider [class*='title-'] { display: none; }
#content-slider span.first { display: none; }
#content-slider span.th { width: 98%; cursor: default; margin-top: 37%; }
#content-slider span.th img { float: left; width: 40%; margin-right: 5%; padding: .7% 0 0 0; }
#content-slider .th>[class*='title-'] { right: 0%; width: 55%; text-align: left; }
#content-slider #b-2 { margin: 5% auto 0 auto; }
#content-slider #b-3, #content-slider #b-4 { margin-top: 5%; }
#content-slider span#b-2:focus { opacity: 1; } span#b-2:focus ~ span#b-5 { display: none; }
#content-slider span#b-3:focus { opacity: 1; } span#b-3:focus ~ span#b-5 { display: none; }
#content-slider span#b-4:focus { opacity: 1; } span#b-4:focus ~ span#b-5 { display: none; }
#content-slider #control { display: block; }
#content-slider #main { padding: 1% 0; width: 100%; margin-top: 29.2%; z-index: 10; position: absolute; text-align: center; background: rgba(0, 0, 0, 0.71); }
#content-slider label.first { display: inline-block; margin-bottom: 0; }
}
@media only screen and (max-width: 480px) {
#content-slider #main { padding: 1% 0; width: 100%; /*bottom: -15.5em;*/ z-index: 10; position: absolute; text-align: center; background: rgba(0, 0, 0, 0.71); }
#content-slider label.first { margin-bottom: 0; }
/*#content-slider span.th { display: none; }*/
#content-slider span.th img { display: none; }
#content-slider .th>[class*='title-'] { width: 98%; margin: 2% auto; position: relative; text-align: center; }
#content-slider #control { margin-top: 12%; }
}
