Make a beautifull Image Slider using html, css and javascript

Hello in today’s blog we will create an image slider with the help of HTML, CSS and JavaScript.

How this image slider works –

Whenever you click on any image it will get bigger.

01. HTML Code :-

I have placed the JavaScript code inside the HTML itself.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Slider</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="slider-container">
      <div class="slider-images">
        <div class="slider-img">
          <img src="https://images.pexels.com/photos/3220360/pexels-photo-3220360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="1" />
          <h1>Amelia</h1>
          <div class="details">
            <h2>Amelia</h2>
            <p>codejuster</p>
          </div>
        </div>
        <div class="slider-img">
          <img src="https://images.pexels.com/photos/3168993/pexels-photo-3168993.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="2" />
          <h1>Mia</h1>
          <div class="details">
            <h2>Mia</h2>
            <p>codejuster</p>
          </div>
        </div>
        <div class="slider-img">
          <img src="https://images.pexels.com/photos/2267793/pexels-photo-2267793.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="3" />
          <h1>Isabella</h1>
          <div class="details">
            <h2>Isabella</h2>
            <p>codejuster</p>
          </div>
        </div>
        <div class="slider-img active">
          <img src="https://images.pexels.com/photos/1478366/pexels-photo-1478366.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="4" />
          <h1>Emma</h1>
          <div class="details">
            <h2>Emma</h2>
            <p>codejuster</p>
          </div>
        </div>
        <div class="slider-img">
          <img src="https://images.pexels.com/photos/1954068/pexels-photo-1954068.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="5" />
          <h1>Claire</h1>
          <div class="details">
            <h2>Claire</h2>
            <p>codejuster</p>
          </div>
        </div>
        <div class="slider-img">
          <img src="https://images.pexels.com/photos/11712176/pexels-photo-11712176.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="6" />
          <h1>Sophia</h1>
          <div class="details">
            <h2>Sophia</h2>
            <p>codejuster</p>
          </div>
        </div>
        <div class="slider-img">
          <img src="https://images.pexels.com/photos/17747773/pexels-photo-17747773/free-photo-of-portrait-cozy-hardeep-jpg.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="7" />
          <h1>Carol</h1>
          <div class="details">
            <h2>Carol</h2>
            <p>codejuster</p>
          </div>
        </div>
      </div>

    </section>
    <script src="jQuery.js"></script>
    <script>
      jQuery(document).ready(function ($) {
        $(".slider-img").on("click", function () {
          $(".slider-img").removeClass("active");
          $(this).addClass("active");
        });
      });
    </script>
  </body>
</html>

02. CSS Code :-

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap");

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Jost", sans-serif;
}
.slider-container{
  width: 100%;
  height: 100vh;
  background-image: url('https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-images{
  display: flex;
  align-items: center;
  gap: 21px;
}
.slider-images img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.slider-img{
  width: 110px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: 0.7s ease;
}
.slider-images .slider-img:first-child, .slider-images .slider-img:last-child{
  height: 480px;
}
.slider-images .slider-img:nth-child(2), .slider-images .slider-img:nth-child(6){
  height: 560px;
}
.slider-images .slider-img:nth-child(3), .slider-images .slider-img:nth-child(4), .slider-images .slider-img:nth-child(5){
  height: 665px;
}
h1{
  font-family: "Jost", sans-serif;
  font-size: 40px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  top: 50%;
  left: -10%;
  transform: rotate(270deg);
  transition: 0.7s ease;
}
.details{
  position: absolute;
  bottom: 43px;
  left: 43px;
}
.details h2{
  font-family: "Jost", sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-align: left;
  line-height: 44px;
  text-align: left;
  color: #fff;
  text-transform: uppercase;
  transition: 0.7s ease;
  display: none;
}
.details p{
  font-family: "Jost", sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  line-height: 33px;
  text-align: left;
  color: #fff;
  text-transform: uppercase;
  transition: 0.7s ease;
  display: none;
}
.slider-img.active{
  width: 766px !important;
  height: 750px !important;
}
.slider-img.active h1{
   display: none;
}
.slider-img.active .details p, .slider-img.active .details h2{
  display: block;
}

OutPut :-

image slider codejuster

Download Ebooks – Click Me

Download Notes – Click Me

Related Posts

Leave a Comment Cancel Reply