Nowadays all websites are responsive or mobile friendly.And its look cool when your website become compatible to alll devices.But sometimes its hard to find some contents that are suitable for a responsive design.And image slider is one of those.Today we are giving you two responsive pure CSS3 image slider.Yes pure CSS3 not a bit of Jquery or Javascript code for transition effect.CSS3 styling make these image slider simple,clean and fast loading.
Responsive Pure CSS3 Smooth Image Slider
• CSS Style
Copy below css style for smooth slider and paste it before <,/head> tag
<style>
#smooth-slider {
text-align: center;
margin: 0 auto;
max-width: 640px;
height:320px;
}
#smooth-slider input {
display: none;
}
#smooth-slider label, a {
color: #ef023f;
cursor: pointer;
text-decoration: none;
}
#smooth-slider label:hover {
color: #ff0042 !important;
}
#slide1:checked ~ #smooth-slides .inner { margin-left:0; }
#slide2:checked ~ #smooth-slides .inner { margin-left:-100%; }
#slide3:checked ~ #smooth-slides .inner { margin-left:-200%; }
#slide4:checked ~ #smooth-slides .inner { margin-left:-300%; }
#slide5:checked ~ #smooth-slides .inner { margin-left:-400%; }
#overflow {
width: 100%;
overflow: hidden;
}
#smooth-slides article img {
width: 100%;
}
#smooth-slides .inner {
width: 500%;
line-height: 0;
}
#smooth-slides article {
width: 20%;
float: left;
}
#controls {
margin: -8% 0 0 84%;
width: 15%;
height: 50px;
}
#controls label {
display: none;
width: 50px;
height: 50px;
}
#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: #f89e67;
}
#active label:hover {
background: #ccc;
border-color: #777 !important;
}
#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://4.bp.blogspot.com/-UIZu65eikkQ/VZ34eU1MJwI/AAAAAAAAAIY/vwJyNNu8Cdg/s1600/next.png') no-repeat;
float: right;
margin: 0 10px 0 0;
display: block;
background-color:#ef023f;
}
#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://2.bp.blogspot.com/-5CImAKrafOY/VZ34euMhR9I/AAAAAAAAAIc/5gpYLrn6Ns0/s1600/prev.png') no-repeat;
float: left;
margin: 0 0 0 -17px;
display: block;
background-color:#ef023f;
}
/* Description Box */
.details {
width:10%;
color: #FFFFFF;
font-style: italic;
line-height: 20px;
margin-top: 260px;
opacity: 0;
position: absolute;
text-align: left;
overflow-wrap: break-word;
-webkit-transform: translateZ(0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.details h3 {
color: #FFFFFF;
margin: 0 0 5px;
font-weight: normal;
font-size: 16px;
font-style: normal;
background: none repeat scroll 0 0 #222222;
padding: 5px;
}
/* slider Styling */
#smooth-slides {
margin: 45px 0 0;
padding: 1%;
background: #222222;
border:3px #222222 solid;
max-width:640px;
max-height:320px;
}
#smooth-slides article img {
width:100%;
height:320px;
}
/* Animation */
#smooth-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 */
}
#smooth-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 ~ #smooth-slides article:nth-child(1) .details,
#slide2:checked ~ #smooth-slides article:nth-child(2) .details,
#slide3:checked ~ #smooth-slides article:nth-child(3) .details,
#slide4:checked ~ #smooth-slides article:nth-child(4) .details,
#slide5:checked ~ #smooth-slides article:nth-child(5) .details {
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;
}
/*Responsive Style */
@media screen and (max-width: 960px) {
#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){
margin: 0 0 0 -50px;
float:left;
}
.details,.details h3{
color:transparent;
background-color:transparent;
}
}
@media screen and (max-width: 768px){
#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){
margin: 0 0 0 -50px;
float:left;;
}
.details,.details h3{
color:transparent;
background-color:transparent;
}
}
@media screen and (max-width: 620px){
#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){
margin: 0 0 0 -70px;
float:left;
}
.details,.details h3{
color:transparent;
background-color:transparent;
}
}
@media screen and (max-width: 420px){
#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){
margin: 0 0 0 -80px;
float:left;
}
#smooth-slides article img {
height:280px;
}
.details,.details h3{
color:transparent;
background-color:transparent;
}
}
@media screen and (max-width: 320px){
#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){
margin: 0 0 0 -80px;
float:left;
}
#smooth-slides article img {
height:220px;
}
.details,.details h3{
color:transparent;
background-color:transparent;
}
}
</style>
• HTML
Here is the html code for smooth slider.Paste it where you want to display slider.
<div class="container">
<article id="smooth-slider">
<input checked="checked" name="smooth-slider" id="slide1" type="radio">
<input name="smooth-slider" id="slide2" type="radio">
<input name="smooth-slider" id="slide3" type="radio">
<input name="smooth-slider" id="slide4" type="radio">
<input name="smooth-slider" id="slide5" type="radio">
<div id="smooth-slides">
<div id="overflow">
<div class="inner">
<article>
<div class="details"><h3>DESCRIPTION 1</h3></div>
<a href="LINK 1"><img src="IMAGE 1"> </a></article>
<article>
<div class="details"><h3>DESCRIPTION 2</h3></div>
<a href="LINK 2"><img src="IMAGE 2"> </a></article>
<article>
<div class="details"><h3>DESCRIPTION 3</h3></div>
<a href="LINK 3"><img src="IMAGE 3"> </a></article>
<article>
<div class="details"><h3>DESCRIPTION 4</h3></div>
<a href="LINK 4"><img src="IMAGE 4"> </a></article>
<article>
<div class="details"><h3>DESCRIPTION 5</h3></div>
<a href="LINK 5"><img src="IMAGE 5"> </a></article>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div>
</article>
</div>
In above html code replace DESCRIPTION 1,LINK 1 and IMAGE 1 with description of first image,link that you want your image to redirect and image link respectively and do so with remaining 4.
Responsive Pure CSS3 Tab Jump Image Slider
• CSS Style
Copy below css style for tab jump slider and paste it before <,/head> tag
<style>
/* Slider Container */
.slidertab {
margin:20px auto;
padding:0px 0px;
width:640px;
height:420px;
position:relative;
border: 5px #fff solid;
}
.slidertab li {
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
/* Tab NAvigation */
.slidertab li input + label {
position:absolute;
bottom:5px;
left:10px;
z-index:999;
font:bold 11px/16px Arial,Sans-Serif;
background-color:black;
color:white;
padding:0px 0px;
width:16px;
text-align:center;
cursor:pointer;
}
.slidertab li:nth-child(2) label {left:28px;}
.slidertab li:nth-child(3) label {left:46px;}
.slidertab li:nth-child(4) label {left:64px;}
.slidertab li:nth-child(5) label {left:82px;}
/* Images */
.slidertab li img {
border:none;
outline:none;
position:absolute;
top:50%;
left:50%;
width:0px;
height:0px;
visibility:hidden;
opacity:0;
-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;
-webkit-transform:rotate(0deg) scale(0);
-moz-transform:rotate(0deg) scale(0);
-ms-transform:rotate(0deg) scale(0);
-o-transform:rotate(0deg) scale(0);
transform:rotate(0deg) scale(0);
}
/* Captions */
.slidertab a {
text-decoration:none !important;
}
.slidertab li a span {
cursor:default;
display:block;
position:absolute;
right:0px;
bottom:0px;
left:0px;
background-color:rgba(0,0,0,0.8);
font:normal 11px/26px Arial,Sans-Serif;
color:white;
padding:0px 10px;
text-align:right;
opacity:0;
viibility:hidden;
-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;
}
/* Active Tab Navigation */
.slidertab li input:checked + label {
background-color:#39f;
color:white;
}
/* Show the image with transition */
.slidertab li input:checked ~ img,
.slidertab li input:checked ~ a img {
top:0%;
left:0%;
width:640px;
height:420px;
visibility:visible;
-webkit-transform:rotate(720deg) scale(1);
-moz-transform:rotate(720deg) scale(1);
-ms-transform:rotate(720deg) scale(1);
-o-transform:rotate(720deg) scale(1);
transform:rotate(720deg) scale(1);
opacity:1;
z-index:99;
}
/* Show the caption with fade effect */
.slidertab li input:checked ~ a span {
opacity:1;
z-index:100;
}
/* Hide the radio */
.slidertab input{
display:none;
}
/*Responsive Style */
@media screen and (max-width: 960px) {
.slidertab,.slidertab li input:checked ~ img,
.slidertab li input:checked ~ a img{
width: 100%;
height: 420px;
}
.slidertab li input + label {
position:absolute;
bottom:1px;
left:10px;
font: bold 16px/18px Arial,Sans-Serif;
}
.slidertab a {
visibility:hidden;
}
}
@media screen and (max-width: 768px){
.slidertab,.slidertab li input:checked ~ img,
.slidertab li input:checked ~ a img{
width: 100%;
height: 420px;
}
.slidertab li input + label {
position:absolute;
bottom:1px;
left:10px;
font: bold 16px/18px Arial,Sans-Serif;
}
.slidertab a {
visibility:hidden;
}
}
@media screen and (max-width: 620px){
.slidertab,.slidertab li input:checked ~ img,
.slidertab li input:checked ~ a img{
width: 100%;
height: 420px;
}
.slidertab li input + label {
position:absolute;
bottom:1px;
left:10px;
font: bold 16px/18px Arial,Sans-Serif;
}
.slidertab a {
visibility:hidden;
}
}
@media screen and (max-width: 420px){
.slidertab,.slidertab li input:checked ~ img,
.slidertab li input:checked ~ a img{
width: 100%;
height: 320px;
}
.slidertab li input + label {
position:absolute;
bottom:1px;
left:10px;
font: bold 16px/18px Arial,Sans-Serif;
}
.slidertab a {
visibility:hidden;
}
}
@media screen and (max-width: 320px){
.slidertab,.slidertab li input:checked ~ img,
.slidertab li input:checked ~ a img{
width: 100%;
height: 220px;
}
.slidertab li input + label {
position:absolute;
bottom:1px;
left:10px;
font: bold 16px/18px Arial,Sans-Serif;
}
.slidertab a {
visibility:hidden;
}
}
</style>
• HTML
Here is the html code for tab jump slider.Paste it where you want to display slider.
<div align="center"> <ul class="slidertab"> <li> <input type="radio" id="s1" name="num" checked="true" /> <label for="s1">1</label> <a href="LINK 1"><img src="IMAGE 1" /><span>CAPTION 1</span></a> </li> <li> <input type="radio" id="s2" name="num" /> <label for="s2">2</label> <a href="LINK 2"><img src="IMAGE 2" /><span>CAPTION 2</span></a> </li> <li> <input type="radio" id="s3" name="num" /> <label for="s3">3</label> <a href="LINK 3"><img src="IMAGE 3" /><span>CAPTION 3</span></a> </li> <li> <input type="radio" id="s4" name="num" /> <label for="s4">4</label> <a href="LINK 4"><img src="IMAGE 4" /><span>CAPTION 4</span></a> </li> <li> <input type="radio" id="s5" name="num" /> <label for="s5">5</label> <a href="LINK 5"><img src="IMAGE 5" /><span>CAPTION 5</span></a> </li> </ul> </div>
In above html code replace LINK 1 , IMAGE 1 and CAPTION 1 with link that you want your image to redirect,image link and description of first image, respectively and do so with remaining 4.
We hope you all like these pure CSS3 sliders.If you face any problem while insatlling this sliders to your website please comment below.
We will update this post with more CSS3 slides…..wait…….
the slider didn’t work or plz help i
what happen…….did u paste css code in head section