If you are a developer then you must have seen many types of sliders that are designed with different languages (Javascript & JQuery Plugin) but in this post, I will show you how to create a multi item slider using pure CSS & owl carousel Plugin. Recently, I have posted 11 examples of Product Card CSS, but today’s topic is how we can make a responsive product card slider html and css.
How to Create a Responsive Multiple Items CSS Carousel?
In this article, we are going to learn how to create a multi card slider html that is used in any eCommerce website to promote any type of product. Stay tuned with this post if you are not sure how to make it.
You can see in the image below how this beautifully designed slider prevents auto sliding while hovering over the mouse screen and is fully responsive for the mobile screen, tablet and PC. Screens larger than 800px show 4 cards and 600px show 2 Tabs and smaller screen sizes show 1 Tab.
Step by Step Guide How to Create Multiple Columns Image Slider
Step__1: Create Multi Item Carousel Html Structure
First, we’ll create the HTML structure for our slider. We add the child div to the parent div according to the number of columns we want. In this case, we are adding six child devices. Each div represents a card that will be displayed in the slider.
Each card has a picture, a name and a price. card__img div for the product image, card__name div to display the product name, and card__precis div to display the price details and icons.
<main class="main bd-grid owl-carousel">
<article class="card">
<div class="card__img">
<img src="assets/img/img1.png" alt="">
</div>
<div class="card__name">
<p>AIR ZOOM PEGASUS</p>
</div>
<div class="card__precis">
<a href="" class="card__icon" ><ion-icon name="heart-outline"></ion-icon></a>
<div>
<span class="card__preci card__preci--before">$990.00</span>
<span class="card__preci card__preci--now">$749.00</span>
</div>
<a href="" class="card__icon"><ion-icon name="cart-outline"></ion-icon></a>
</div>
</article>
<article class="card">
<div class="card__img">
<img src="assets/img/img2.png" alt="">
</div>
<div class="card__name">
<p>AIR ZOOM PEGASUS</p>
</div>
<div class="card__precis">
<a href="" class="card__icon" ><ion-icon name="heart-outline"></ion-icon></a>
<div>
<span class="card__preci card__preci--before">$990.00</span>
<span class="card__preci card__preci--now">$749.00</span>
</div>
<a href="" class="card__icon"><ion-icon name="cart-outline"></ion-icon></a>
</div>
</article>
<article class="card">
<div class="card__img">
<img src="assets/img/img3.png" alt="">
</div>
<div class="card__name">
<p>AIR ZOOM PEGASUS</p>
</div>
<div class="card__precis">
<a href="" class="card__icon" ><ion-icon name="heart-outline"></ion-icon></a>
<div>
<span class="card__preci card__preci--before">$990.00</span>
<span class="card__preci card__preci--now">$749.00</span>
</div>
<a href="" class="card__icon"><ion-icon name="cart-outline"></ion-icon></a>
</div>
</article>
<article class="card">
<div class="card__img">
<img src="assets/img/img4.png" alt="">
</div>
<div class="card__name">
<p>AIR ZOOM PEGASUS</p>
</div>
<div class="card__precis">
<a href="" class="card__icon" ><ion-icon name="heart-outline"></ion-icon></a>
<div>
<span class="card__preci card__preci--before">$990.00</span>
<span class="card__preci card__preci--now">$749.00</span>
</div>
<a href="" class="card__icon"><ion-icon name="cart-outline"></ion-icon></a>
</div>
</article>
<article class="card">
<div class="card__img">
<img src="assets/img/img3.png" alt="">
</div>
<div class="card__name">
<p>AIR ZOOM PEGASUS</p>
</div>
<div class="card__precis">
<a href="" class="card__icon" ><ion-icon name="heart-outline"></ion-icon></a>
<div>
<span class="card__preci card__preci--before">$990.00</span>
<span class="card__preci card__preci--now">$749.00</span>
</div>
<a href="" class="card__icon"><ion-icon name="cart-outline"></ion-icon></a>
</div>
</article>
<article class="card">
<div class="card__img">
<img src="assets/img/img4.png" alt="">
</div>
<div class="card__name">
<p>AIR ZOOM PEGASUS</p>
</div>
<div class="card__precis">
<a href="" class="card__icon" ><ion-icon name="heart-outline"></ion-icon></a>
<div>
<span class="card__preci card__preci--before">$990.00</span>
<span class="card__preci card__preci--now">$749.00</span>
</div>
<a href="" class="card__icon"><ion-icon name="cart-outline"></ion-icon></a>
</div>
</article>
</main> Step__2: CSS Code:
I didn’t want to use traditional fonts, so I decided to use external fonts. Then, I imported a font from Google Fonts ‘Open Sense’ for my slider with a weight of 400 (Normal) and 700 (Bold). ) Is.
And I define some CSS variables. I use these variables to store the colors that I will use throughout the CSS file. By defining them in one place, I can easily change the colors later if I want to. If you want to know about the :root property, what it is, and how it works, then write your thoughts in the comment section. I will make a new tutorial on it. I implemented the .main class to the main container of the slider. I added a top margin of 10% to give some space at the top of the page.
Also read: 16 Examples Of CSS Carousel
I applied the .card class to each card in the slider. I used position: relative; to position the card relative to its normal position. This allows me to position the child elements (like the name and price) relative to the card. I used the display:flex; and flex-direction: column; to arrange all child elements (image, name, and price) in a column, you can also use the grid layout, but here I’m using Flex. Next added the align-items: center; to center the child elements into horizontally and also applied the overflow: hidden; to ensure that nothing spills out of the card. If you want to know in depth about overflow property, then stay with me, I will share a detailed article on it.
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
/*-- VARIABLES CSS--*/
/*Colores*/
:root{
--first-color: #E3F8FF;
--second-color: #DCFAFB;
--third-color: #FFE8DF;
--accent-color: #FF5151;
--dark-color: #161616;
}
.main{
margin-top: 10%;
}
/*-- COMPONENT --*/
.card{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 1.3rem 2rem;
border-radius: 1rem;
overflow: hidden;
}
article:nth-child(1){
background-color: var(--first-color);
}
article:nth-child(2){
background-color: var(--second-color);
}
article:nth-child(3){
background-color: var(--third-color);
}
article:nth-child(4){
background-color: var(--second-color);
}
.card__img{
width: 180px;
height: auto;
padding: 3rem 0;
transition: .5s;
} NOW I will move to an explanation of the code of card image. First, I targeted .card__img class to design the image of each card. I set the width to 180px and the height to auto to maintain the aspect ratio of the image. I added the padding at the top and bottom to give some space around the image. I also added a transition effect that will be used when the image is hovered over.
.card__img{
width: 180px;
height: auto;
padding: 3rem 0;
transition: .5s;
} Here I applied the .card__name class to the product name in each card and designed it according to the requirements and I also used the writing mode: vertical-rl; and transform: rotate(180deg); To display the name vertically. When we hover the mouse over the card, you can see the image or live demo, the black color bar is smoothly visible from the left side. We use the CSS Transform property to create these types of effects.
.card__name{
position: absolute;
left: -25%;
top: 0;
width: 3.5rem;
height: 100%;
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: center;
background-color: var(--dark-color);
color: #fff;
font-weight: bold;
transition: .5s;
}
.card__icon{
font-size: 1.5rem;
color: var(--dark-color);
}
.card__icon:hover{
color: var(--accent-color);
}
.card__precis{
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
transition: .5s;
}
.card__preci{
display: block;
text-align: center;
}
.card__preci--before{
font-size: var(--smaller-font-size);
color: var(--accent-color);
margin-bottom: .25rem;
}
.card__preci--now{
font-size: var(--h3-font-size);
font-weight: bold;
}
/*Move left*/
.card:hover{
box-shadow: 0 .5rem 1rem #D1D9E6;
}
.card:hover .card__name{
left: 0;
}
.card:hover .card__img{
transform: rotate(30deg);
margin-left: 3.5rem;
}
.card:hover .card__precis{
margin-left: 3.5rem;
padding: 0 1.5rem;
}
/*-- MEDIA QUERIES --*/
/* @media screen and (min-width: 1200px){
body{
margin: 3rem 0 0 0;
}
.title-shop{
margin: 0 5rem;
}
.bd-grid{
margin-left: auto;
margin-right: auto;
}
} */ Step__3:
The design of the product card has been completed but the slider is yet to be created. Now we will learn to put a carousel on them.
Also read: How to Create a Content Slider Using Pure CSS
Steps for implement the Owl carousel:
- Go to the Owl carousel official website and download the zip file.
- Extract Zip File
- Go to the dist folder and copy owl.carousel.js & also go to the assets folder copy the owl.carousel.css file and paste it into your project folder.
- Paste the <link rel=”stylesheet” href=”owl.carousel.css”> link into <head> tag.
- Go to Jquery official website and copy the Cdn link & paste it into the end of the <body> tag.
- Paste the <script src=”owl.carousel.js”></script> bottom of the Jquery Cdn link.
- Paste code bottom of the 6th step.
Now, we move on to the JavaScript part where we implement the Owl Carousel. The Owl Carousel is a popular jQuery plugin that allows you to create beautiful, responsive Carousel.
<script> $('.owl-carousel').owlCarousel({
loop:true,
margin:15,
nav:true,
items: 4,
autoplay:true,
autoplayTimeout:1500,
autoplayHoverPause:true,
responsive:{
0:{ items:1 },
574:{ items:2 },
600:{ items:2 },
800:{ items:3 },
1000:{ items:4 }, } })
</script> I have divided the code explanation into steps for your better understanding.
$('.owl-carousel').owlCarousel({ ... }): This is where we initialize the Owl Carousel. We’re targeting the element with the class ofowl-carousel(which we added to our main parent tag in the HTML) and applying the Owl Carousel functionality to it.loop: true: This option makes the carousel loop infinitely. When user reach the last item in the carousel, it will loop back to the first item.margin: 15: This option sets the space (in pixels) between each item in the carousel.nav: true: This option adds navigation arrows to the carousel, allowing users to manually navigate through the items.items: 4: This option sets the number of items to display at a time in the carousel. In this case, we’re displaying 4 items at a time.autoplay: true: This option makes the carousel move automatically without the user having to manually navigate through the items.autoplayTimeout: 1500: This option sets the time (in milliseconds) between each auto slide. In this case, the carousel will automatically move to the next item every 1.5 seconds.autoplayHoverPause: true: This option pauses the autoplay when the user hovers over the carousel. This allows users to pause the carousel to take a closer look at an item.responsive: { ... }: This option allows you to set different numbers of items to be displayed at different screen widths. This makes the carousel responsive, meaning it will display well on all device sizes. In this case, I’m displaying 1 item at screen widths of 0px, 2 items at screen widths of 574px and 600px, 3 items at screen widths of 800px, and 4 items at screen widths of 1000px.
Also read: How to style custom checkbox CSS
Step__4: Customizing the Owl Carousel Buttons
Lastly, I customized the design of the Owl Carousel buttons. I added some CSS to change the appearance of the buttons. Here’s what the CSS might look like:
/* Owl Carousel Buttons Design */
.owl-carousel .owl-nav button.owl-prev {
background: none;
color: inherit;
border: none;
padding: 0 !important;
font: inherit;
position: absolute;
top: 35%;
}
.owl-carousel .owl-nav button.owl-prev span {
font-size: 3rem !important;
}
.owl-carousel .owl-nav button.owl-next {
background: none;
color: inherit;
border: none;
padding: 0 !important;
font: inherit;
position: absolute;
right: 0px;
top: 35%;
}
.owl-carousel .owl-nav button.owl-next span {
font-size: 3rem !important;
}
How to Customize the Slider?
You can customize this slider as per your needs. I’m sharing some hints for your better understanding.
- Changing the Colors: You can easily change the colors of the cards by modifying the CSS variables at the top of the CSS file. For example, you could change
--first-color: #E3F8FF;to--first-color: #yourColor;to change the color of the first card. - Adding Animations: You can add animations to the cards using CSS animations or transitions. For example, you could add a
transition: transform 0.3s ease;to the.cardclass and atransform: scale(1.1);to the.card:hoverclass to make the cards grow when hovered over. - Changing the Number of Items Displayed: You can change the number of items displayed at a time by modifying the
itemsoption in the Owl Carousel configuration. For example, you could changeitems: 4toitems: 3to display 3 items at a time. - Changing the Autoplay Speed: You can change the speed of the autoplay by modifying the
autoplayTimeoutoption in the Owl Carousel configuration. For example, you could changeautoplayTimeout: 1500toautoplayTimeout: 2000to make the carousel move every 2 seconds instead of 1.5 seconds.
I certainly hope that you’ve found this post both insightful and practical. I’ve strived to deliver detailed, user-friendly content that will assist you in mastering this tutorial. Should you have any further questions, or curiosities, or if there’s anything you’re unsure about, please don’t hesitate to drop a comment. Your engagement is extremely valuable to me and my community. I promise to read every single comment and respond as soon as I can. It’s my aim to make sure you’re never left hanging with a question, as I’m more than eager to assist you in broadening your knowledge.