akiran / akiran/react-slick

React slick is using variable width and all the slides are not shown or the slides going on the next slide

Abierto
#2,208 2 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
11.9k
Forks
2.1k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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 (


Our Cutomers Love Us







Biotin Gummies


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


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


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


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


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;
}

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.