React slick is using variable width and all the slides are not shown or the slides going on the next slide
- Lingua principale
- JavaScript
- Stelle
- 11.9k
- Fork
- 2.1k
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
This is the code:
import React from "react";
import { HomePageStars } from "./HomePageStars";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
export const CustomersLoveUs = () => {
const settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
initialSlide: 0,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: false,
dots: true,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
};
return (
Biotin Gummies
Highly Effective
Gummies give me a wonderful results and i will buy more for my
family members. Man matters really creating a space for every
man to solve their mental physical or emotional problems.
Thankyou
Ayush
Vegain Plant Protein Powder
Best vegan supplement
I was using whey protein as I am a vegetarian and wanted to
switch to Vegan options. I felt I got good results from this.
It has multivitamins also to enhance absorption of protein
better and herbs like Ashwagandha also keeps energy High.{" "}
Hemanthkumar M
Scalp Revitalising Kit
Highly recommend these!
This Scalp Revitalising Kit is best for dandruff and hair fall
problems. Simple for use and full satisfied product.
Chetan R
BeardMax 5% Minoxidil for Patchy Beard
Perfect
My experience was great all thanks to Dr. Raj from man
matters. I was not getting the results I expected in 1st month
but I was firm that I will get result as I always took
followup appointment with Dr. Raj and he guided me with the
process, how to use, facts and myths. By 3rd month I was
getting some real results. It really works if you're
consistent.
Prateet S.
GrowMax 5% Minoxidil
Satisfied
I started finding positive results from the sixth month
onwards
Deepu
);
};
CSS:
.customer-review-card__main{
font-size: 20px;
line-height: 28px;
}
.customer-review-card__wrapper{
background-color: rgba(253, 243, 232, 1);
width: 248px !important;
margin-right: 16px;
border-radius: 1.5rem;
display: flex;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
padding: 0.5rem;
box-sizing: border-box;
height: 380px;
}
.customer-review-card__reviewer {
position: absolute;
bottom: 0px;
}
.customer-review-card__image-container {
padding: 0.5rem;
border-radius: 1rem;
display: flex;
align-items: center;
background-color: rgba(255,255,255,1);
}
.customer-review-card__image {
border-radius: 1rem;
border: 1px solid rgba(255,255,255,1);
}
.customer-review-card__image img {
height: 50px;
}
.customer-review-card__product {
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
.customer-review-card__review {
padding: 16px;
position: relative;
height: 250px;
}
.customer-review-card__star {
padding: 0px;
}
.customer-review-card__review-title {
font-weight: 400;
font-size: 12px;
line-height: 16px;
padding: 4px 0px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.customer-review-card__review-text {
font-size: 12px;
color: #6C6C6C;
}
.customer-review-card__reviewer {
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
@media screen and (min-width: 768px){
.customer-review-card__main{
font-size: 40px;
line-height: 54px;
}
.customer-review-card__wrapper,.slick-slide {
width: 360px !important;
height: 459px;
}
.customer-review-card__image img {
height: 70px;
}
.customer-review-card__review{
height: 320px;
}
.customer-review-card__review-title {
font-weight: 900;
font-size: 18px;
line-height: 25px;
padding: 4px 0px;
}
.customer-review-card__review-text {
font-size: 16px;
}
.customer-review-card__reviewer {
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
}
.slick-slide {
margin-right: 15px;
}
.slick-list {
margin: 0 -10px;
}
.slick-slide > div {
margin-right: 15px;
}
.slick-slide {
display: inline-block;
}
.slick-track{
display: flex !important;
}
Guida per i contributori
Apri la guida per i contributori
Valutazione
Questa issue non è ancora stata valutata.