Create a Responsive Product Showcase Carousel using HTML, CSS, and JavaScript

Faraz

By Faraz - Last Updated:

Learn how to create a responsive product showcase carousel using HTML, CSS, and JavaScript. Perfect for eCommerce and portfolio websites.

Join us on Telegram
how to create a responsive product showcase carousel using html, css and javascript.png
Read AlsoBuild a Number Guessing Game using HTML, CSS, and JavaScript with Source Code.webpBuild a Number Guessing Game using HTML, CSS, and JavaScript | Source Code

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

With the rise of responsive design, showcase carousels are a popular tool for showcasing a wide variety of products. You can create your own showcase carousel using HTML and CSS, with some JavaScript help on the front-end.

If you want to learn how to create a responsive product showcase carousel using HTML, CSS, and JavaScript, then this post is for you!

In this tutorial, we will guide you through the steps to create a responsive product showcase carousel using HTML, CSS, and JavaScript. A product showcase carousel is a great way to display your products or services in a visually attractive way. By the end of this tutorial, you will have a product showcase carousel that works across different devices and screen sizes.

Before we start, let's understand the basic components of a product showcase carousel. A product showcase carousel typically includes a set of product images, a navigation system, and a description of the products. The carousel should also be responsive, meaning it should work on different screen sizes and devices.

Let's start making this amazing responsive product showcase carousel using HTML, CSS, and JavaScript step by step.

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Inspired by: Francesco Zagami

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our product carousel.

Breakdown of the Code:

1. Head Section (<head>)

  • Sets up the document structure with <!DOCTYPE html>.
  • Defines metadata:
    • <meta charset="UTF-8"> ensures proper character encoding.
    • <meta name="viewport" content="width=device-width"> makes the website responsive.
  • Links external stylesheets:
    • Swiper.js for the image carousel.
    • Normalize.css to ensure consistent styling across browsers.
    • styles.css for custom styles.

2. Body Section (<body>)

2.1 Header Section (.header)
  • Contains:
    • Menu icon (<svg>) – A hamburger menu icon.
    • Company logo – An image of the brand.
    • Navigation menu – Links like Mask, Helmet, Bottle, Accessories.
    • Icons – Search, user profile, and shopping cart icons.
2.2 Swiper Carousel (.mySwiper)
  • This is the main product showcase slider.
  • Each slide (.swiper-slide) displays a product.
2.3 Each Product Slide (.swiper-slide)

Each product has:

  • Left section (.left-side):

    • Product title (Closca Bottle).
    • Product name (Beach, Savanna, etc.).
    • Price (€39.90).
    • Short environmental message about pollution or nature.
    • "Shop Now" button with an arrow icon.

  • Right section (.center):

    • Background image – Represents the product’s theme (e.g., beach or savanna).
    • Product image – The actual bottle.
Read AlsoCreate Digital Customer Sample Receipt using HTML, CSS, and JavaScript.jpgCreate Digital Customer Sample Receipt using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our product carousel.

Below is a breakdown of key sections:

1. Importing Google Fonts

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
  • The Montserrat font (sans-serif) is used for the main text.
  • The EB Garamond font (serif) is used for italicized text.

2. CSS Variables (:root)

:root {
  --body-color: #2c2d2a;
  --savanna-bg: #e9bf8b;
  --beach-bg: #e7dfcf;
  --glacier-bg: #b6d6c8;
  --coral-bg: #e86357;
  --arrow-fill: #333231;
  --body-font: "Montserrat", sans-serif;
  --italic-font: "EB Garamond", serif;
}
  • Defines color and font variables for easier theme management.
  • --body-color: Main text color.
  • Background colors (--savanna-bg, --beach-bg, etc.) define different theme styles.
  • --body-font and --italic-font store the imported fonts.

3. Global Styles

* {
  box-sizing: border-box;
  outline: none;
}
img {
  max-width: 100%;
}
a {
  text-decoration: none;
  color: var(--body-color);
}
h1, h2, h3 {
  margin: 0;
}
  • box-sizing: border-box: Ensures padding and borders are included in the element's width/height.
  • max-width: 100%: Ensures images are responsive.
  • text-decoration: none: Removes underline from links.
  • color: var(--body-color): Ensures links have the main text color.

4. Body Styling

body {
  font-family: var(--body-font);
  background-color: #1d1e20;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2em;
  width: 100%;
  height: 100vh;
  color: var(--body-color);
}
  • display: flex: Centers content.
  • background-color: #1d1e20: Dark background.
  • height: 100vh: Makes the body take full screen height.

5. Container

.container {
  max-width: 1100px;
  border-radius: 4px;
  max-height: 680px;
  height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #e6decf;
  padding: 0 30px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
  • max-width: 1100px: Limits the container width.
  • height: 90vh: Almost full-screen height.
  • overflow-y: auto: Enables vertical scrolling.

6. Header

.header {
  display: flex;
  align-items: center;
  height: 62px;
  width: 100%;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid rgba(44, 45, 42, 0.25);
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--beach-bg);
  z-index: 6;
}
  • display: flex: Aligns elements in a row.
  • position: sticky; top: 0: Makes the header stay at the top when scrolling.

7. Main Section

.main {
  padding: 42px 0 30px;
  display: flex;
  flex-grow: 1;
  position: relative;
}
  • display: flex: Arranges elements horizontally.
  • flex-grow: 1: Makes it expand within its parent.

8. Typography (Title & Subtitle)

.main-title {
  font-family: var(--italic-font);
  font-size: 100px;
  font-weight: 400;
  margin-top: 10px;
  line-height: 1em;
}
.main-subtitle {
  font-family: var(--italic-font);
  font-weight: 400;
  font-size: 32px;
  margin-top: 14px;
  margin-bottom: 60px;
}
  • Uses EB Garamond for a classic look.
  • font-size: 100px: Large title.
  • margin-bottom: 60px: Adds spacing.

9. Center Section (Image)

.center {
  display: flex;
  margin-left: 120px;
  position: relative;
  flex-shrink: 0;
}
.center .bottle-bg {
  width: 320px;
  height: 450px;
  object-fit: cover;
  border-radius: 160px;
}
  • Centers the image.
  • border-radius: 160px: Gives a rounded appearance.

10. Swiper (Carousel)

.swiper-slide {
  opacity: 0 !important;
  transition: 0.4s;
}
.swiper-slide-active {
  opacity: 1 !important;
}
  • opacity: 0: Hides inactive slides.
  • opacity: 1: Makes the active slide visible.

11. Buttons

.button-wrapper {
  position: absolute;
  right: 30px;
  bottom: 20px;
  display: flex;
  align-items: center;
}
.button-wrapper .swiper-button {
  border: 1px solid var(--body-color);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
  • Styles navigation buttons.
  • border-radius: 50%: Makes circular buttons.
  • cursor: pointer: Indicates they are clickable.

This will give our carousel an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");
:root {
  --body-color: #2c2d2a;
  --savanna-bg: #e9bf8b;
  --beach-bg: #e7dfcf;
  --glacier-bg: #b6d6c8;
  --coral-bg: #e86357;
  --arrow-fill: #333231;
  --body-font: "Montserrat", sans-serif;
  --italic-font: "EB Garamond", serif;
}

* {
  box-sizing: border-box;
  outline: none;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: var(--body-color);
}

h1,
h2,
h3 {
  margin: 0;
}

body {
  font-family: var(--body-font);
  background-color: #1d1e20;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2em;
  width: 100%;
  height: 100vh;
  color: var(--body-color);
}
@media (max-width: 480px) {
  body {
    padding: 0;
  }
}

.container {
  max-width: 1100px;
  border-radius: 4px;
  max-height: 680px;
  height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
  background-color: #e6decf;
  padding: 0 30px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
@media (max-width: 480px) {
  .container {
    height: 100%;
    max-height: 100%;
  }
}

.logo {
  width: 116px;
}

.header {
  display: flex;
  align-items: center;
  height: 62px;
  width: 100%;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid rgba(44, 45, 42, 0.25);
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--beach-bg);
  z-index: 6;
}
@media (max-width: 575px) {
  .header {
    width: calc(100% + 20px);
    margin-left: -10px;
  }
}
.header-menu {
  display: flex;
  align-items: center;
  margin-left: auto;
}
@media screen and (max-width: 740px) {
  .header-menu {
    display: none;
  }
}
.header-menu a:not(:first-child) {
  margin-left: 30px;
}
.header .menu-icon {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.header .menu-icon svg {
  width: 22px;
}
.header-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
}
.header-icons svg {
  width: 18px;
}
.header-icons svg:not(:last-child) {
  margin-right: 20px;
}

.left-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 320px;
}
@media screen and (max-width: 930px) {
  .left-side {
    text-align: center;
    max-width: 450px;
  }
}

.mySwiper {
  display: flex;
  flex-grow: 1;
  position: relative;
}

.main {
  padding: 42px 0 30px;
  display: flex;
  flex-grow: 1;
  position: relative;
}
@media screen and (max-width: 930px) {
  .main {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
  }
}
.main-header {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 4px;
  font-weight: 600;
  transition-delay: 0.2s;
}
.main-title {
  font-family: var(--italic-font);
  font-size: 100px;
  font-weight: 400;
  margin-top: 10px;
  line-height: 1em;
  transition-delay: 0.3s;
}
.main-subtitle {
  font-family: var(--italic-font);
  font-weight: 400;
  font-size: 32px;
  margin-top: 14px;
  margin-bottom: 60px;
  transition-delay: 0.4s;
}
.main-content__title {
  font-size: 26px;
  font-family: var(--italic-font);
  font-style: italic;
  margin-bottom: 14px;
  transition-delay: 0.2s;
}
.main-content__subtitle {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
  transition-delay: 0.3s;
}
.main-content .more-menu {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition-delay: 0.4s;
}
@media screen and (max-width: 930px) {
  .main-content .more-menu {
    justify-content: center;
  }
}
.main-content .more-menu svg {
  width: 28px;
  height: 18px;
  margin-left: 10px;
}

.center {
  display: flex;
  margin-left: 120px;
  position: relative;
  flex-shrink: 0;
}
@media screen and (max-width: 930px) {
  .center {
    margin-left: 0;
    margin-bottom: 56px;
  }
}
.center .bottle-bg {
  width: 320px;
  height: 450px;
  object-fit: cover;
  border-radius: 160px;
}
@media screen and (max-width: 930px) {
  .center .bottle-bg {
    width: 260px;
    height: 390px;
  }
}
@media screen and (max-width: 575px) {
  .center .bottle-bg {
    width: 220px;
    height: 340px;
  }
}
.center .bottle-img {
  position: absolute;
  top: 25%;
  left: 0;
  transform: scale(1.6);
}

.swiper-pagination {
  position: absolute;
  right: 30px;
  left: auto;
  top: 100px;
  width: auto;
  bottom: auto;
  z-index: 2;
  font-size: 14px;
  font-family: var(--body-font);
  font-weight: 500;
}

.button-wrapper {
  position: absolute;
  right: 30px;
  bottom: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 930px) {
  .button-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    justify-content: space-between;
    padding: 0 60px;
  }
}
@media screen and (max-width: 575px) {
  .button-wrapper {
    padding: 0 20px;
  }
}
.button-wrapper svg {
  width: 28px;
}
.button-wrapper .swiper-button {
  border: 1px solid var(--body-color);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, var(--body-color) 40%, transparent 0%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.3s ease-out;
  cursor: pointer;
}
.button-wrapper .swiper-button + .swiper-button {
  margin-left: 16px;
}
@media screen and (max-width: 930px) {
  .button-wrapper .swiper-button + .swiper-button {
    margin-left: 0;
  }
}
.button-wrapper .swiper-button:hover {
  background-color: var(--body-color);
  background-position: left bottom;
}
.button-wrapper .swiper-button:hover svg {
  stroke: #fff;
}
.button-wrapper .swiper-prev-button {
  background: linear-gradient(to left, var(--body-color) 40%, transparent 0%);
  background-size: 200% 100%;
  background-position: left bottom;
  transition: all 0.3s ease-out;
}
.button-wrapper .swiper-prev-button svg {
  transform: rotate(-180deg);
}
.button-wrapper .swiper-prev-button:hover {
  background-position: right bottom;
}

.swiper-slide {
  opacity: 0 !important;
  transition: 0.4s;
}
.swiper-slide-active {
  opacity: 1 !important;
}

.swiper-slide .main-wrapper > *,
.swiper-slide .main-content > * {
  transform: translateY(-30px);
  opacity: 0;
  transition-duration: 0.8s;
}

.swiper-slide-active .main-wrapper > *,
.swiper-slide-active .main-content > * {
  transform: none;
  opacity: 1;
}

.swiper-slide .bottle-bg {
  transition-duration: 0.6s;
  opacity: 0;
  object-position: 60%;
}

.swiper-slide-active .bottle-bg {
  opacity: 1;
  transform: none;
  object-position: 50%;
}

.swiper-slide .bottle-img {
  transition-duration: 0.8s;
  transform: scale(1.2);
  opacity: 0;
}

.swiper-slide-active .bottle-img {
  opacity: 1;
  transform: scale(1.6);
}

[data-sld="1"] .container,
[data-sld="1"] .header {
  background-color: var(--savanna-bg);
}

[data-sld="2"] .container,
[data-sld="2"] .header {
  background-color: var(--glacier-bg);
}

[data-sld="3"] .container,
[data-sld="3"] .header {
  background-color: var(--coral-bg);
}

Step 3 (JavaScript Code):

Finally, we need to create a swiper function in JavaScript. Below is a breakdown of what each part of the code does:

1. Initialize Swiper

var swiper = new Swiper(".mySwiper", {
  • This line creates a new Swiper instance targeting the .mySwiper class (which should be present in the HTML).
  • The options inside the object define how the slider will behave.

2. Navigation Controls

navigation: {
	nextEl: ".swiper-next-button",
	prevEl: ".swiper-prev-button"
},
  • Enables navigation buttons for the slider.
  • nextEl: ".swiper-next-button" → Selects the element (e.g., a button) with this class to navigate to the next slide.
  • prevEl: ".swiper-prev-button" → Selects the element to navigate to the previous slide.

3. Slide Transition Effect

effect: "fade",
  • Changes the transition effect of slides to "fade" (instead of the default sliding effect).
  • This means slides will smoothly fade in and out rather than moving horizontally.

4. Pagination Settings

pagination: {
	el: ".swiper-pagination",
	type: "fraction",
}
  • Enables pagination, which shows the current slide number.
  • el: ".swiper-pagination" → Selects the element to display pagination.
  • type: "fraction" → Displays pagination as a fraction (e.g., 1/5, 2/5).

5. Event Listener for Slide Change

swiper.on('slideChange', function(sld) {
	document.body.setAttribute('data-sld', sld.realIndex);
});
  • swiper.on('slideChange', callback) → Triggers when the slide changes.
  • sld.realIndex gives the actual index of the currently active slide.
  • document.body.setAttribute('data-sld', sld.realIndex); → Adds a custom attribute data-sld to the <body> element, updating it with the current slide index.
var swiper = new Swiper(".mySwiper", {
	navigation: {
		nextEl: ".swiper-next-button",
		prevEl: ".swiper-prev-button"
	},
	effect: "fade",
	loop: "infinite",
	pagination: {
          el: ".swiper-pagination",
          type: "fraction",
        }
});

swiper.on('slideChange', function(sld) {
	document.body.setAttribute('data-sld', sld.realIndex);
})

Final Output:

how to create a responsive product showcase carousel using html, css and javascript.gif
Read Alsocreate-attendee-badge-using-html-and-css.webpCreate Attendee Badge Using HTML and CSS

Conclusion:

You have successfully created a responsive product showcase carousel using HTML, CSS, and JavaScript! Now, you can display your products or services in a visually attractive and user-friendly way. With a little bit of customization, you can create a carousel that matches the branding and style of your website.

To recap, you learned how to create the HTML structure for the carousel, add CSS styling to make it responsive and visually attractive, and add JavaScript functionality to make it interactive. With these skills, you can create other types of carousels, such as a testimonial carousel or a portfolio carousel.

We hope this tutorial was helpful, and feel free to experiment and make your own modifications to the carousel to make it your own.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: product showcase carousel, html, css, javascript, responsive, design, development, product showcase carousel tutorial, creating a responsive product showcase carousel, html and css product showcase, javascript product showcase, designing a product showcase carousel
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺