Learn how to create a responsive product showcase carousel using HTML, CSS, and JavaScript in this tutorial. Follow the step-by-step guide to design a visually attractive product carousel.
Table of Contents
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 these amazing responsive product showcase carousel using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
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.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Also, Do not forget to add the swiper CSS and js link into your HTML file. Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
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.
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.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension.
Finally, we will link CSS and JavaScript files into HTML so that we can see the final result.
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:
Conclusion:
Congratulations, 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. Happy coding!
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 😊
