Pure Css and HTML Image Slider

Written by @kerixa 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.

Code Snippet:

                                                
                                                <!-- 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>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300