Close Menu
    JavaScript

    How to create Smooth Image Slider using HTML CSS & JavaScript

    Coding StellaBy No Comments4 Mins Read

    Let’s create a Smooth Image Slider using HTML, CSS, and JavaScript. This slider will allow images to transition smoothly, providing a sleek and interactive way to showcase content.

    We’ll use HTML to structure the slider, CSS to style it and add smooth transitions, and JavaScript to handle the sliding functionality.

    Let’s get started on building the Smooth Image Slider. Whether you’re a beginner or an experienced developer, this project offers a great way to enhance your web development skills and create an elegant, user-friendly image slider. Let’s dive in!

    HTML :

    This HTML file creates a smooth image slider showcasing different countries with background images, descriptions, and a “See More” button; it links to external stylesheets for styling and icons, includes navigation buttons for sliding through images, and loads a JavaScript file for interactive functionality.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth Image Slider Effect</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="slide">
            <div class="item" style="background: url('/images/Switzerland.png');">
                <div class="content">
                    <div class="name">Switzerland</div>
                    <div class="description">Renowned for its breathtaking Alpine scenery and precision in craftsmanship</div>
                    <button>See More</button>
                </div>
            </div>

            <div class="item" style="background: url('/images/Finland.png');">
                <div class="content">
                    <div class="name">Finland</div>
                    <div class="description">Known for its saunas, lakes, and a deep connection to nature</div>
                    <button>See More</button>
                </div>
            </div>

            <div class="item" style="background: url('/images/India.png');">
                <div class="content">
                    <div class="name">India</div>
                    <div class="description">Famous for its rich culture, historical landmarks, natural beauty, and diverse cuisine</div>
                    <button>See More</button>
                </div>
            </div>

            <div class="item" style="background: url('/images/Australia.png');">
                <div class="content">
                    <div class="name">Australia</div>
                    <div class="description">Distinguished by its diverse ecosystems, ranging from beaches to bushland</div>
                    <button>See More</button>
                </div>
            </div>

            <div class="item" style="background: url('/images/Netherland.png');">
                <div class="content">
                    <div class="name">Netherland</div>
                    <div class="description">Characterized by its iconic canals, tulip fields, and windmills</div>
                    <button>See More</button>
                </div>
            </div>

            <div class="item" style="background: url('/images/Ireland.png');">
                <div class="content">
                    <div class="name">Ireland</div>
                    <div class="description">Known for its lush green landscapes and rich cultural heritage</div>
                    <button>See More</button>
                </div>
            </div>
        </div>

        <div class="button">
            <button class="prev"><i class="fa-solid fa-arrow-left"></i></button>
            <button class="next"><i class="fa-solid fa-arrow-right"></i></button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

    CSS :

    This CSS code creates a centered image slider with smooth transitions and animations, where the first two images are displayed in full size while the others are positioned sequentially to the right; the active slide reveals its content with fade-in effects, and navigation buttons at the bottom allow interaction.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  background: #eaeaea;
  overflow: hidden;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 600px;
  border-radius: 15px;
  background: #f5f5f5;
  box-shadow: 0 30px 50px #dbdbdb;
}

.container .slide .item {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 20px;
  box-shadow: 0 30px 50px #505050;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
  transition: 0.5s;
}

.slide .item:nth-child(1),
.slide .item:nth-child(2) {
  top: 0;
  left: 0;
  transform: translate(0, 0);
  border-radius: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.slide .item:nth-child(2) .content {
  display: block;
}

.slide .item:nth-child(3) {
  left: 50%;
}

.slide .item:nth-child(4) {
  left: calc(50% + 220px);
}

.slide .item:nth-child(5) {
  left: calc(50% + 440px);
}

.slide .item:nth-child(n + 6) {
  left: calc(50% + 440px);
  overflow: hidden;
}

.item .content {
  position: absolute;
  top: 50%;
  left: 100px;
  width: 300px;
  text-align: left;
  color: #eee;
  transform: translate(0, -50%);
  font-family: system-ui;
  display: none;
}

.content .name {
  font-size: 40px;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  animation: animate 1s ease-in-out 1 forwards;
}

.content .description {
  margin-top: 10px;
  margin-bottom: 20px;
  opacity: 0;
  animation: animate 1s ease-in-out 0.3s 1 forwards;
}

.content button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  opacity: 0;
  animation: animate 1s ease-in-out 0.6s 1 forwards;
}

@keyframes animate {
  from {
    opacity: 0;
    transform: translate(0, 100px);
    filter: blur(33px);
  }

  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}

.button {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 20px;
}

.button button {
  width: 40px;
  height: 35px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  margin: 0 5px;
  border: 1px solid #000;
  transition: 0.3s;
}

.button button:hover {
  background: #ababab;
  color: #fff;
}

    JavaScript:

    This code enables a simple carousel functionality where clicking the “next” button moves the first .item to the end, and clicking the “prev” button moves the last .item to the beginning within the .slide container, creating a looping effect.

    let next = document.querySelector('.next');
let prev = document.querySelector('.prev');

next.addEventListener('click', function() {
    let items = document.querySelectorAll('.item');
    document.querySelector('.slide').appendChild(items[0]);
})

prev.addEventListener('click', function() {
    let items = document.querySelectorAll('.item');
    document.querySelector('.slide').prepend(items[items.length - 1]);
})

    In conclusion, creating a Smooth Image Slider using HTML, CSS, and JavaScript has been a fun and valuable project. By combining HTML for structure, CSS for styling and transitions, and JavaScript for interactivity, we’ve built a visually appealing and smooth-scrolling image slider.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply