How to Build an Amazing Carousel using HTML, CSS & JS

In this blog post, we’ll delve into creating a dynamic image slider with navigation controls using HTML, CSS, and JavaScript. This slider allows users to cycle through a series of images with smooth transitions and provides next and previous buttons for navigation.

HTML Structure:

The HTML structure defines the layout and content of the image slider. Here’s a breakdown:

<main>
  <ul class='gallery'>
    <li class='slide' style="background-image: url('https://cdn.mos.cms.futurecdn.net/dP3N4qnEZ4tCTCLq59iysd.jpg')">
      <div class='content'>
        <h2 class='heading'>"Lossless Youths"</h2>
        <p class='info'> Lorem ipsum, dolor sit amet consectetur
        adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
        praesentium nisi. Id laboriosam ipsam enim.  </p>
        <button>Read More</button>
      </div>
    </li>
    <li class='slide' style="background-image: url('https://i.redd.it/tc0aqpv92pn21.jpg')">
      <div class='content'>
        <h2 class='heading'>"Estrange Bond"</h2>
        <p class='info'> Lorem ipsum, dolor sit amet consectetur
        adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
        praesentium nisi. Id laboriosam ipsam enim.  </p>
        <button>Read More</button>
      </div>
    </li>
    <li class='slide' style="background-image: url('https://wharferj.files.wordpress.com/2015/11/bio_north.jpg')">
      <div class='content'>
        <h2 class='heading'>"The Gate Keeper"</h2>
        <p class='info'> Lorem ipsum, dolor sit amet consectetur
        adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
        praesentium nisi. Id laboriosam ipsam enim.  </p>
        <button>Read More</button>
      </div>
    </li>
    <li class='slide' style="background-image: url('https://images7.alphacoders.com/878/878663.jpg')">
      <div class='content'>
        <h2 class='heading'>"Last Trace Of Us"</h2>
        <p class='info'>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.
        </p>
        <button>Read More</button>
      </div>
    </li>
    <li class='slide' style="background-image: url('https://theawesomer.com/photos/2017/07/simon_stalenhag_the_electric_state_6.jpg')">
      <div class='content'>
        <h2 class='heading'>"Urban Decay"</h2>
        <p class='info'>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.
        </p>
        <button>Read More</button>
      </div>
    </li>
    <li class='slide' style="background-image: url('https://da.se/app/uploads/2015/09/simon-december1994.jpg')">
      <div class='content'>
        <h2 class='heading'>"The Migration"</h2>
        <p class='info'> Lorem ipsum, dolor sit amet consectetur
        adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
        praesentium nisi. Id laboriosam ipsam enim.  </p>
        <button>Read More</button>
      </div>
    </li>
  </ul>
  <nav class='navigation'>
    <ion-icon class='btn prev' name="arrow-back-outline"></ion-icon>
    <ion-icon class='btn next' name="arrow-forward-outline"></ion-icon>
  </nav>
</main>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

HTML

Main Section:
- Contains a <ul> element with the class .slider, which holds the list of image items.
Image Items:
- Each <li> element with the class .item represents an image slide.
- Inside each item, there’s a <div> with the class .content, containing the image title, description, and a “Read More” button.
Navigation Buttons:
- The navigation buttons are represented by <ion-icon> elements within a <nav> element with the class .nav.

CSS Styling:

The CSS styling is responsible for the visual presentation of the image slider and its components. Key styles include:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

main {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.slide {
  width: 200px;
  height: 300px;
  list-style-type: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  box-shadow: 0 20px 30px rgba(255,255,255,0.3) inset;
  transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;

  &:nth-child(1), &:nth-child(2) {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
  }

  &:nth-child(3) { left: 50%; }
  &:nth-child(4) { left: calc(50% + 220px); }
  &:nth-child(5) { left: calc(50% + 440px); }
  &:nth-child(6) { left: calc(50% + 660px); opacity: 0; }
}

.content {
  width: min(30vw,400px);
  position: absolute;
  top: 50%;
  left: 3rem;
  transform: translateY(-50%);
  font: 400 0.85rem helvetica,sans-serif;
  color: white;
  text-shadow: 0 3px 8px rgba(0,0,0,0.5);
  opacity: 0;
  display: none;

  & .heading {
    font-family: 'arial-black';
    text-transform: uppercase;
  }

  & .info {
    line-height: 1.7;
    margin: 1rem 0 1.5rem;
    font-size: 0.8rem;
  }

  & button {
    width: fit-content;
    background-color: rgba(0,0,0,0.1);
    color: white;
    border: 2px solid white;
    border-radius: 0.25rem;
    padding: 0.75rem;
    cursor: pointer;
  }
}

.slide:nth-of-type(2) .content {
  display: block;
  animation: show 0.75s ease-in-out 0.3s forwards;
}

@keyframes show {
  0% {
    filter: blur(5px);
    transform: translateY(calc(-50% + 75px));
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.navigation {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  user-select: none;

  & .btn {
    background-color: rgba(255,255,255,0.5);
    color: rgba(0,0,0,0.7);
    border: 2px solid rgba(0,0,0,0.6);
    margin: 0 0.25rem;
    padding: 0.75rem;
    border-radius: 50%;
    cursor: pointer;

    &:hover {
      background-color: rgba(255,255,255,0.3);
    }
  }
}

@media (width > 650px) and (width < 900px) {
  .content {
    & .heading        { font-size: 1rem; }
    & .info  { font-size: 0.7rem; }
    & button        { font-size: 0.7rem; }
  }
  .slide {
    width: 160px;
    height: 270px;

    &:nth-child(3) { left: 50%; }
    &:nth-child(4) { left: calc(50% + 170px); }
    &:nth-child(5) { left: calc(50% + 340px); }
    &:nth-child(6) { left: calc(50% + 510px); opacity: 0; }
  }
}

@media (width < 650px) {
  .content {
    & .heading        { font-size: 0.9rem; }
    & .info  { font-size: 0.65rem; }
    & button        { font-size: 0.7rem; }
  }
  .slide {
    width: 130px;
    height: 220px;

    &:nth-child(3) { left: 50%; }
    &:nth-child(4) { left: calc(50% + 140px); }
    &:nth-child(5) { left: calc(50% + 280px); }
    &:nth-child(6) { left: calc(50% + 420px); opacity: 0; }
  }
}

CSS

Global Styles:
- Resets default browser styles and sets the background color.
Image Item Styles:
- Defines dimensions, position, background, border radius, and box shadow for each image item.
- Applies transition effects for smoother animations.
Content Styles:
- Styles the content container with appropriate typography, text shadow, and opacity transitions.
- Adjusts the positioning and appearance of the title, description, and button.
Navigation Button Styles:
- Positions the navigation buttons at the bottom center of the slider.
- Styles the buttons with background color, border, padding, and hover effects.

JavaScript Functionality:

The JavaScript code adds interactivity to the image slider, enabling navigation between images. Key functionalities include:

const gallery = document.querySelector('.gallery');

function moveSlide(e) {
  const slides = document.querySelectorAll('.slide');
  e.target.matches('.next') && gallery.append(slides[0])
  e.target.matches('.prev') && gallery.prepend(slides[slides.length-1]);
}

document.addEventListener('click',moveSlide,false);

JavaScript

Navigation Activation:
- Listens for click events on the navigation buttons.
- Moves the first or last image item to the end or beginning of the slider, respectively, based on the clicked button.

Conclusion:

In this blog post, we’ve explored the creation of a dynamic image slider with navigation controls using HTML, CSS, and JavaScript. By understanding the structure, styling, and functionality of each component, you can customize and enhance the slider to suit various content and design requirements. Whether you’re showcasing a portfolio, product gallery, or storytelling visuals, this slider offers a user-friendly and engaging way to present images on your website.

Happy Coding!

How to Build an Amazing Carousel using HTML, CSS & JS

HTML Structure:

CSS Styling:

JavaScript Functionality:

Conclusion:

Comments

Leave a Reply Cancel reply