More
Comments2
Learn

Two Responsive Pure CSS3 Image Slider For Your Website

By Sabarinath
image slider
 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

Responsive Pure CSS3 Smooth Slider
Smooth Slider DEMO

• 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

Responsive Pure CSS3 Tab Jump Slider
Responsive Tab Jump Slider DEMO

•  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…….

Sabarinath
Sabarinathhttps://techlog360.com
Sabarinath is the tech-savvy founder and Editor-in-Chief of TechLog360. With years of experience in the tech industry and a computer science background, he's an authority on the latest tech news, business insights, and app reviews. Trusted for his expertise and hands-on tips for Android and iOS users, Sabarinath leads TechLog360 with a commitment to accuracy and helpfulness. When not immersed in the digital world, he's exploring new gadgets or sharing knowledge with fellow tech enthusiasts.

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from this stream

© 2024 Copyright - TechLog360