Bottle Product Carousel using HTML CSS and JavaScript

Step into the world of Coding Torque, where innovation and creativity converge to forge captivating web experiences! Today, get ready to be enthralled as we embark on an exciting journey, crafting an enchanting Bottle Product Carousel that seamlessly blends the prowess of HTML, CSS, and JavaScript. Imagine a dynamic showcase of your products, elegantly sliding into view, each bottle telling its own story with fluid animations and interactive charm. Whether you’re a web development enthusiast seeking to elevate your skills or a brand owner eager to mesmerize your audience with an immersive product display, this tutorial is your gateway to unlocking the true potential of HTML, CSS, and JavaScript. So, fasten your seatbelts and prepare to unleash a carousel of ingenuity, where the fusion of code and design results in an awe-inspiring symphony of visual delight! Welcome to the realm of Bottle Product Carousel, where innovation knows no bounds!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

50 HTML CSS and JavaScript Projects you should create

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Bottle Product Carousel using HTML, CSS and JavaScript - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

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

</html>

Paste the below code in your `<body>` tag.

<div class="carousel">
  <div class="slides">
    <img
      src="https://i.loli.net/2020/01/20/2wx8npJFiDUzu4T.png"
      alt="Stainless Steel"
    />
    <img
      src="https://i.loli.net/2020/01/20/YWA6RhCcESgN3Ty.png"
      alt="Army Green"
    />
    <img
      src="https://i.loli.net/2020/01/19/4HaLyI7NQRf3teO.png"
      alt="Cranberry"
    />
    <img
      src="https://i.loli.net/2020/01/19/QVY6JSEbqiOvAp1.png"
      alt="Midnight Blue"
    />
  </div>
  <div class="overlays">
    <div class="bar" style="--bar-color: #bdc3c7;"></div>
    <div class="bar" style="--bar-color: #218c74;"></div>
    <div class="bar" style="--bar-color: #dd6b7b;"></div>
    <div class="bar" style="--bar-color: #30465c;"></div>
  </div>
  <ul class="nav-links">
    <li><a href="#" class="nav-link">Stainless Steel</a></li>
    <li><a href="#" class="nav-link">Army Green</a></li>
    <li><a href="#" class="nav-link">Cranberry</a></li>
    <li><a href="#" class="nav-link">Midnight Blue</a></li>
  </ul>
</div>

CSS Code

Create a file style.css and paste the code below.

@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
body {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	background: #eceffc;
}
.carousel {
	position: relative;
	display: flex;
}
.carousel .slides {
	position: relative;
	top: -4em;
	left: 10em;
}
.carousel .slides img {
	position: absolute;
	width: 450px;
	height: 450px;
	opacity: 0;
	z-index: 9999;
}
.carousel .slides img.active {
	opacity: 1;
}
.carousel .overlays {
	position: relative;
	width: 36em;
	height: 18em;
}
.carousel .overlays .bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bar-color);
	transform-origin: left;
}
.carousel .nav-links {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	margin: 0;
	padding: 0 0 0 6em;
	list-style-type: none;
}
.carousel .nav-links .nav-link {
	font-size: 2rem;
	font-family: Lora, serif;
	line-height: 2;
	text-decoration: none;
	color: #7f8c8d;
	transition: 0.3s;
}
.carousel .nav-links .nav-link:hover {
	color: #1c1e1f;
}
.carousel .nav-links .nav-link.active {
	color: black;
	pointer-events: none;
}

JavaScript Code

Create a file script.js and paste the code below.

let navLinks = document.querySelectorAll(".carousel .nav-link");
let slides = document.querySelectorAll(".carousel .slides img");
let overlays = document.querySelectorAll(".carousel .bar");
let maxZIndex = navLinks.length;
let easeInOutQuart = "cubic-bezier(0.77, 0, 0.175, 1)";
slides[0].classList.add("active");
navLinks[0].classList.add("active");
navLinks.forEach((navLink, activeIndex) => {
  (overlays[activeIndex]).style.zIndex = `${navLinks.length -
    activeIndex}`;
  navLink.addEventListener("click", () => {
    // nav-link
    navLinks.forEach(navLink => navLink.classList.remove("active"));
    navLink.classList.add("active");
    // slide
    let currentSlide = document.querySelector(".carousel .slides img.active");
    let slideFadeOut = currentSlide.animate(
      [
        { transform: "translateX(0)", opacity: 1 },
        { transform: "translateX(5%)", opacity: 0 }
      ],
      {
        duration: 600,
        easing: "ease-in",
        fill: "forwards"
      }
    );
    slideFadeOut.onfinish = () => {
      slides.forEach(slide => slide.classList.remove("active"));
      let activeSlide = slides[activeIndex];
      activeSlide.classList.add("active");
      activeSlide.animate(
        [
          {
            transform: "translateX(-5%)",
            opacity: 0
          },
          {
            transform: "translateX(0)",
            opacity: 1
          }
        ],
        { duration: 600, easing: "ease-out", fill: "forwards" }
      );
    };
    // overlay
    maxZIndex += 1;
    let activeOverlay = overlays[activeIndex];
    (activeOverlay).style.zIndex = `${maxZIndex}`;
    activeOverlay.animate(
      [{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }],
      { duration: 1200, fill: "forwards", easing: easeInOutQuart }
    );
  });
});

Final Output

Bottle Product Carousel using HTML, CSS and JavaScript

Written by: Piyush Patil

Code Credits: alphardex

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖