It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 27 March 2021
Using a slider in most advanced websites has become commonplace and without any slider the website does not look interesting. In the following code, we have a beautiful slider in pure CSS and HTML that is very useful for displaying photo galleries. The background of this slider is red, but you can change it to your desired color. This slider is also responsive and therefore it works on every device.
<!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
* {
margin: 0;
padding: 0;
border: 0
}
body {
background-color: #AF392C
}
img {
display: block;
width: 100%;
height: 100%
}
/**-------------- Start Slider ---------------**/
#slider {
width: 100%;
height: 400px;
position: relative;
margin: auto;
padding: 100px 0
}
#slider input {
display: none
}
#slider .slides {
position: absolute;
width: 100%;
height: 400px
}
#slider .slides .slide {
width: 33.33333333%;
height: 100%;
float: left;
filter: alpha(opacity=70); /* for IE */
opacity: .7
}
#slider .arrow label {
display: inline-block;
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100px;
height: 45px;
margin-top: -22.5px;
text-align: center;
display: none;
}
#slider .next-arrow label {
right: 0;
left: auto
}
#slider .arrow label:hover .thumb {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
-webkit-transition: transform .5s ease-in;
transition: transform .5s ease-in
}
#slider .arrow label i {
display: block;
width: 40%;
height: 45px;
background-color: rgba(122,184,0,.8);
color: #fff;
line-height: 45px
}
#slider .arrow label .thumb {
display: block;
width: 60%;
height: 45px
}
#slider .prev-arrow label i {
float: left
}
#slider .prev-arrow label .thumb {
float: right;
-webkit-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
}
#slider .next-arrow label i {
float: right
}
#slider .next-arrow label .thumb {
float: left;
-webkit-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
}
#slide-1-radio:checked ~ .slides .slide:first-child {
position: relative;
z-index: 1;
box-shadow: 0 1px 20px rgba(255,255,255,.7);
filter: alpha(opacity=100); /* for IE */
opacity: 1;
-webkit-transform: translateX(100%) scale(1.2);
-ms-transform: translateX(100%) scale(1.2);
transform: translateX(100%) scale(1.2);
-webkit-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out
}
#slide-1-radio:checked ~ .slides .slide:nth-child(2) {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out
}
#slide-1-radio:checked ~ .prev-arrow #prev-3-arrow,
#slide-1-radio:checked ~ .next-arrow #next-2-arrow {
display: inline-block
}
#slide-2-radio:checked ~ .slides .slide:nth-child(2) {
position: relative;
z-index: 1;
box-shadow: 0 1px 20px rgba(255,255,255,.7);
filter: alpha(opacity=100); /* for IE */
opacity: 1;
-webkit-transform: translateX(0) scale(1.2);
-ms-transform: translateX(0) scale(1.2);
transform: translateX(0) scale(1.2);
-webkit-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out
}
#slide-2-radio:checked ~ .slides .slide:first-child {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out
}
#slide-2-radio:checked ~ .prev-arrow #prev-1-arrow,
#slide-2-radio:checked ~ .next-arrow #next-3-arrow {
display: inline-block
}
#slide-3-radio:checked ~ .slides .slide:last-child {
position: relative;
z-index: 1;
box-shadow: 0 1px 20px rgba(255,255,255,.7);
filter: alpha(opacity=100); /* for IE */
opacity: 1;
-webkit-transform: translateX(-100%) scale(1.2);
-ms-transform: translateX(-100%) scale(1.2);
transform: translateX(-100%) scale(1.2);
-webkit-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out
}
#slide-3-radio:checked ~ .slides .slide:nth-child(2) {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: transform .5s ease-in-out;
transition: transform .5s ease-in-out
}
#slide-3-radio:checked ~ .prev-arrow #prev-2-arrow,
#slide-3-radio:checked ~ .next-arrow #next-1-arrow {
display: inline-block
}
/**-------------- End Slider ---------------**/
/**----------- Start Media ----------**/
@media screen and (max-width: 768px) {
#slider {
width: 100%;
height: 175px
}
#slider .slides {
height: 175px
}
#slider .arrow label {
width: 80px
}
}
/**----------- End Media ----------**/
</style>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<section id= "slider">
<!-- Start Slider Checked -->
<input type= "radio" name="slider" id= "slide-1-radio" checked />
<input type= "radio" name="slider" id= "slide-2-radio" />
<input type= "radio" name="slider" id= "slide-3-radio" />
<!-- End Slider Checked -->
<!-- Start Slides -->
<div class= "slides">
<div class= "slide">
<a href= "#"><img src= "https://www.htmlbestcodes.com/files/slider-a1.jpg" alt="slide-1" /></a>
</div>
<div class= "slide">
<a href= "#"><img src= "https://www.htmlbestcodes.com/files/slider-a2.jpg" alt="slide-1" /></a>
</div>
<div class= "slide">
<a href= "#"><img src= "https://www.htmlbestcodes.com/files/slider-a3.jpg" alt="slide-1" /></a>
</div>
</div>
<!-- End Slides -->
<!-- Start Slider Control -->
<!-- Start Prevese Arrow -->
<div class="prev-arrow arrow">
<label for= "slide-1-radio" id= "prev-1-arrow">
<i class= "fa fa-arrow-left"></i>
<span class= "thumb">
<img src= "https://www.htmlbestcodes.com/files/slider-a1.jpg" alt="slide-1-thumb" />
</span>
</label>
<label for= "slide-2-radio" id= "prev-2-arrow">
<i class= "fa fa-arrow-left"></i>
<span class= "thumb">
<img src= "https://www.htmlbestcodes.com/files/slider-a2.jpg" alt="slide-2-thumb" />
</span>
</label>
<label for= "slide-3-radio" id= "prev-3-arrow">
<i class= "fa fa-arrow-left"></i>
<span class= "thumb">
<img src= "https://www.htmlbestcodes.com/files/slider-a3.jpg" alt="slide-3-thumb" />
</span>
</label>
</div>
<!-- Start Prevese Arrow -->
<!-- Start next Arrow -->
<div class="next-arrow arrow">
<label for= "slide-1-radio" id= "next-1-arrow">
<i class= "fa fa-arrow-right"></i>
<span class= "thumb">
<img src= "https://www.htmlbestcodes.com/files/slider-a1.jpg" alt="slide-1-thumb" />
</span>
</label>
<label for= "slide-2-radio" id= "next-2-arrow">
<i class= "fa fa-arrow-right"></i>
<span class= "thumb">
<img src= "https://www.htmlbestcodes.com/files/slider-a2.jpg" alt="slide-2-thumb" />
</span>
</label>
<label for= "slide-3-radio" id= "next-3-arrow">
<i class= "fa fa-arrow-right"></i>
<span class= "thumb">
<img src= "https://www.htmlbestcodes.com/files/slider-a3.jpg" alt="slide-3-thumb" />
</span>
</label>
</div>
<!-- Start next Arrow -->
<!-- End Slider Control -->
</section>
<!-- End Slider --><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!