Introduction of Hero Section Carousel
Hello! Guys, today we are going to teach you how to make a Hero section carousel for the online book store. We will show you the online book page of Comics. This is made with the help of HTML, CSS, and JavaScript, with step-by-step code to get a proper understanding. On the page below the heading, there is some text written about the heading. Then there is the counter section, in which there will be records of viewers. Below the counter, there is a button given for viewing a larger collection of comic books and anime. If you are interested, then you can go for it. Now the main section starts, in which there will be names and images of the books. When you slide right, there are more books that you can read.
Now let’s start making this project with the help of the simple and easy code of HTML, CSS, and JavaScript by following it carefully to understand it without any problem. If you have any doubt while understanding it, you can contact us through the contact details given below.
HTML
First, we will make the structure of the hero section carousel with the help of HTML (Is used to make the structure of a web page). In this, we will give the heading of the page in the title tag (which is used to give the title of the page). Then we will move toward the main content of this project, which will be written in the body tag.
In this, we will make a parent div in which we will write the heading of the page in the h tag. Some paragraphs about the heading in the p tag. There will also be a list of counters on which the viewer’s details will be recorded. Then we will make another parent div in which images of the comic books will be inserted with their names. At the end, we will make a div to make some designs using CSS.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title> Hero Section With Carousel </title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<div class="content">
<h2>Welcome to Comic Book Store</h2>
<p> Welcome to your modern comic book store. We have a diverse collection ranging from comics for the perfect collector, thousands of back issues, graphic novels, manga, and comics for the young readers in your life. </p>
<ul class="counter">
<li>
<h3><i class="fa-solid fa-book"></i>50k +</h3>
<span>Comic collections</span>
</li>
<li>
<h3><i class="fa-solid fa-user"></i>20,000 + </h3>
<span>customers</span>
</li>
</ul>
<button class="btn">Go to Comic Collections <i class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="swiper-container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide--one">
<span>bestseller</span>
<div class="slide-content">
<h3>Super Man vs Broly</h3>
</div>
</div>
<div class="swiper-slide swiper-slide--two">
<span>bestseller</span>
<div class="slide-content">
<h3>Naruto Sasuke</h3>
<p>Action Anime Comic</p>
</div>
</div>
<div class="swiper-slide swiper-slide--three">
<span>bestseller</span>
</div>
<div class="swiper-slide swiper-slide--four">
<span>bestseller</span>
</div>
<div class="swiper-slide swiper-slide--five">
<span>bestseller</span>
</div>
<div class="swiper-slide swiper-slide--six">
<span>bestseller</span>
<div class="slide-content">
<h3>Tanjiro Manga</h3>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="circle"></div>
</main>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js'></script><script src="./script.js"></script>
</body>
</html>
CSS
After making the structure of the Hero Section With Carousel, we will now give it some styling with the help of CSS (Cascading Style Sheet). Which is used to give styling to the web page made in an external file and attached to the HTML file using a link tag. In this, we will make the background dark gray. Then we will move toward the main styling of the elements of the web page.
This will give styling like color, font size, and font weight to the headings, paragraphs, also give color and size to the counter-section elements. Then we will style the button by giving it text color, background color, size, and a hovering effect to make it good for performance. Now we will adjust the size and position of all images in a horizontal manner and make it scroll horizontally.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Courgette&family=Noto+Serif+Vithkuqi:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Chonburi&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
overflow-x: hidden;
position: relative;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
main {
position: relative;
min-height: 100vh;
column-gap: 3rem;
padding-block: min(20vh, 3rem);
padding-inline: 2.3em;
align-items: center;
justify-content: center;
background: #000000;
overflow: hidden;
}
@media screen and (min-width: 960px) {
main {
display: flex;
padding-inline: 0;
}
}
main .content {
width: 100%;
color: #fff;
position: relative;
z-index: 2;
margin-bottom: 3em;
}
@media screen and (min-width: 960px) {
main .content {
width: 40%;
padding-left: 5em;
margin-bottom: 0;
}
}
main h2 {
letter-spacing: 0.8px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 700;
font-size: 2.6rem;
line-height: 1.2;
color: rgb(255, 255, 255);
}
main p {
font-size: 1rem;
line-height: 1.8;
margin-inline: auto;
margin-top: 10px;
}
main .counter {
font-weight: 400;
display: flex;
align-items: center;
margin: 2.5em 0 2em 0;
gap: 2em;
}
main .counter i {
margin-right: 10px;
}
main .counter span {
display: block;
text-transform: capitalize;
font-size: 0.8rem;
color: #c1c1c1;
margin-top: 3px;
}
main .btn {
background-color: #1d1ad5;
border: none;
color: white;
padding: 12px 20px;
font-size: 16px;
cursor: pointer;
display: inline-block;
border-radius: 4px;
transition: 0.3s ease-in;
}
main .btn i {
margin-left: 15px;
}
main .btn:hover {
background-color: #10024f;
}
.swiper-container {
position: relative;
overflow: hidden;
width: 100%;
right: 0px;
margin: 0 auto;
}
@media screen and (min-width: 960px) {
.swiper-container {
width: 60%;
right: -60px;
}
}
.swiper {
position: relative;
width: 100%;
z-index: 2;
}
.swiper-slide {
width: 10rem;
height: 24rem;
display: flex;
flex-direction: column;
align-items: self-start;
position: relative;
border-radius: 12px;
box-shadow: -1px 5px 15px #ffffff1f;
text-align: center;
opacity: 0.4;
transition: opacity 0.4s ease-in;
}
.swiper-slide span {
display: inline-block;
backdrop-filter: blur(15px);
border-radius: 0 50px 50px 0;
text-transform: capitalize;
padding: 12px 20px;
letter-spacing: 0.5px;
font-weight: 900;
position: absolute;
width: 50%;
top: 2em;
left: 0;
color: #ffffff;
}
.swiper-slide h3 {
color: #fff;
font-size: 1.3rem;
line-height: 1.4;
margin-bottom: 0.625rem;
letter-spacing: 0.8px;
position: relative;
word-wrap: break-word;
}
@media screen and (min-width: 800px) {
.swiper-slide h3 {
font-size: 1.8rem;
}
}
.swiper-slide p {
color: #fff;
line-height: 1.6;
font-size: 0.8rem;
}
.swiper-slide .slide-content {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, -10px);
width: 90%;
}
.swiper-slide--one {
background: #1a81ae;
background: linear-gradient(to bottom, #2c536400, #203a4303, #0f2027cc), url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF1TxzRHXlOy4lZ89lmFWr7nTNp8kDSiHPQs7Sq0Or0IzZXtOMXuXr6kSOeyldn_Wq_RusEX3WdRUuQEL0eH9cuvqWhrlUMZGqcTopOfDX2RTwdqSG8H_v5-iOyoZKQ_2qImeVD0UHZvJ1/w919/superman-vs-broly-anime-comics-uhdpaper.com-4K-6.1311-wp.thumbnail.jpg") no-repeat 50% 50%/cover;
}
.swiper-slide--one h3 {
font-family: "Courgette", cursive;
font-weight: 300;
}
.swiper-slide--two {
background: linear-gradient(to bottom, #2c536400, #203a4303, #0f2027cc), url("https://w0.peakpx.com/wallpaper/979/468/HD-wallpaper-naruto-sasuke-action-anime-cartoon-comic-japanese-naroto.jpg") no-repeat 50% 50%/cover;
}
.swiper-slide--two h3 {
font-family: "Noto Serif Vithkuqi", serif;
font-weight: 300;
}
.swiper-slide--three {
background: url("https://ew.com/thmb/cfI3sDbVBeAX3kItAxkBzPyWHg0=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/CAPASOL2022001_DC11-46258561f5da441b97bc3b476e4efc5d.jpg") no-repeat 50% 50%/cover;
}
.swiper-slide--four {
background: url("https://i.pinimg.com/736x/24/ea/5a/24ea5a5c671ca7ba785a91ca1998cbb6.jpg") no-repeat 50% 50%/cover;
}
.swiper-slide--five {
background: url("https://i.ebayimg.com/images/g/orYAAOSwG4tj~oMx/s-l1200.webp") no-repeat 50% 50%/cover;
}
.swiper-slide--six {
background: linear-gradient(to bottom, #2c536400, #203a4303, #0f2027cc), url("https://m.media-amazon.com/images/I/819u4fGVMGL._AC_UF1000,1000_QL80_.jpg") no-repeat 50% 50%/cover;
}
.swiper-slide--six h3 {
font-family: "Chonburi", cursive;
font-weight: 400;
}
.swiper-slide-active {
display: grid;
opacity: 1;
}
.swiper-pagination {
position: relative;
bottom: -0.313rem;
text-align: center;
margin-top: 35px;
width: auto;
}
.swiper-pagination-bullet {
border-radius: 0;
width: 1.5rem;
height: 0.25rem;
background: #fff;
}
.swiper-pagination-bullet-active {
background: #fff;
}
.circle {
position: absolute;
bottom: -5em;
left: -8em;
width: clamp(150px, 40vw, 400px);
height: clamp(150px, 40vw, 400px);
background: rgb(136, 237, 255);
border-radius: 50%;
z-index: 1;
opacity: 0.7;
}JavaScript
After making the whole structure of the Hero Section With Carousel. We will now add some logic to the images section of the comics in the horizontal scroll section to make it better for scrolling using JavaScript (which is used to give the logic on the web page). In this, we will target the scrolling icons, which are below the images. Make it workable when the user clicks on that particular icon, and the page at that number will come.
var swiper = new Swiper(".swiper", {
effect: "coverflow",
grabCursor: true,
spaceBetween: 30,
centeredSlides: false,
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 0,
modifier: 1,
slideShadows: false
},
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true
},
keyboard: {
enabled: true
},
mousewheel: {
thresholdDelta: 70
},
breakpoints: {
460: {
slidesPerView: 3
},
768: {
slidesPerView: 3
},
1024: {
slidesPerView: 3
},
1600: {
slidesPerView: 3.6
}
}
});Output of Hero Section Carousel
Finally, we made the whole structure of the Hero section carousel using the simple and step-by-step code of HTML, CSS, and JavaScript. This is going to be very useful for you. You can use it to sell any product on a web page. If you want the source code, then click on the button given below to download it.
For more explanation, click on the link given below to watch the video.
You can also check:
