A product card contains a picture or image of the product, price, and description of that product or an item. A product card is used to advertise a product to people. The Image Slider is also called Image Carousel or Slideshow. The Image Slider may be the convenient way to display the changing or sliding images one by one on your website. Image slider or slideshow commonly shows one large image at a time with a little scrap of text, at the bottom of the image. In the Image Slider, the images will slide one by one when the button is clicked, manually.
In this blog (Responsive Product Card Slider), there is a card at the top of the webpage, there are two other cards at both sides of the main card with the opacity. The card will slide automatically, if you want the card to be operated manually, you can use the arrow buttons and also the bar which is below the card. Below the main image, there is a name of the product, price, and a button to add to the cart.
The source code of this Responsive Product Card Slider is given below, if you want the source code of this program, you can copy it. You can use this Responsive Product Card Slider code with your creativity and can take this product card to the next level.
Responsive Product Card Slider [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
html,
body {
margin: 0;
padding: 0;
background: #000;
}
h2,
p {
margin: 30px 0 0;
padding: 0;
}
p {
color: #072f5f;
}
.slider {
max-width: 800px;
width: 90%;
margin: 15px auto;
background: linear-gradient(to right, #185a9d, #43cea2);
border-radius: 5px;
padding: 15px 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.slick-slider button{
position: absolute;
top: 50%;
background: #fff;
border: none;
outline: none;
z-index:100;
width: 50px;
height: 50px;
color: transparent;
cursor: pointer;
transform: translate(0%,-70%);
border-radius: 36px;
box-shadow: 0px 2px 20px rgba(0,0,0,0.07);
}
.slick-slider .slick-prev{
left:-30px;
}
.slick-slider .slick-prev::before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f104";
font-size:30px;
color: #072f5f;
left: 8px;
position: relative;
z-index: 10;
}
.slick-slider .slick-next{
right:-30px;
}
.slick-slider .slick-next::after{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
font-size:30px;
color: #072f5f;
right: 15px;
position: relative;
z-index: 10;
}
.slick-slide {
color: #333;
padding: 40px 0;
font-size: 1.25em;
font-family: "Verdana";
text-align: center;
pointer-events: none;
}
.slick-slide .desc {
opacity: 0;
}
.slick-slide .desc>* {
transition: all 900ms ease;
}
.slick-slide .desc h2 {
position: relative;
left: 50px;
line-height: 1;
}
.slick-slide .desc h2 span{
color:#bcdee7;
}
.slick-slide .desc p {
position: relative;
top: 50px;
opacity: 0;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
text-align: center;
}
.slick-dots li {
display: inline-block;
padding: 1px;
background: #ccc;
margin: 10px 5px;
width: 40px;
height: 4px;
border-radius: 10px;
cursor: pointer;
}
.slick-dots li.slick-active {
background: #072f5f;
}
.slick-dots button {
display: none;
}
.slick-slide {
opacity: 0.2;
transition: all 300ms ease;
}
.slick-current {
opacity: 1;
transform: scale(1.1);
}
.slick-current .desc {
opacity: 1;
}
.slick-current .desc h2 {
left: 0;
}
.slick-current .desc p {
top: 0;
opacity: 1;
}
.btn {
border-radius: 30px;
padding: 10px 20px;
border: 2px solid #072f5f;
text-decoration: none;
color: #072f5f;
font-size: .6em;
text-transform: uppercase;
display: block;
margin: 30px auto 0;
max-width: 100px;
width: 100%;
font-weight: bold;
pointer-events: initial;
}
.credit{
text-align: center;
color: #fff;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color: #bcdee7;
font-weight: bold;
}
function createSlick(){
$(".slider").not('.slick-initialized').slick({
centerMode: true,
autoplay: true,
dots: true,
arrows: true,
slidesToShow: 3,
responsive: [{
breakpoint: 768,
settings: {
dots: false,
arrows: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
}
createSlick();
$(window).on( 'resize', createSlick );
Thank you for reading our blog. If you face any problem in creating this Responsive Product Card Slider using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team