Breaking News: Grepper is joining You.com. Read the official announcement!

react next js react-slick slick-carousell

Powerful Petrel answered on September 15, 2023 Popularity 8/10 Helpfulness 4/10

answer react next js react-slick slick-carousell

react next js react-slick slick-carousell

Comment

//install of libraries 
npm install react-slick slick-carousel

//data conts
export const slidePeople = [
  {
    image:
      "https:...",
    name: "John Doe",
    text: "Lorwem ipsum",
  },
  .
  .
  .
];

//CSS (module)
.container {
  width: 100%;
  padding: 20px 0;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgb(175, 175, 175);
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #9c9c9c;
  border-radius: 5px;
}

.imageContainer {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
}

.roundedImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.name {
  margin: 8px 0;
  font-size: 18px;
}

.description {
  font-size: 14px;
  text-align: justify;
}

//Global CSS
@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

//create space betweeen cards
.slick-slide > div {
  margin: 0 10px;
}
.slick-list {
  margin: 0 -10px;
}

//remove arrows according to seted parametrs in this case 1024
@media (max-width: 1024px) {
  .slick-next,
  .slick-prev {
    display: none !important;
  }
}

//React component
import Slider from "react-slick";
import { slidePeople } from "../../../Data/SlidePeople";
import styles from "./TestimonialSlider.module.css";

//breakpoint(s) must be from lowest to highest
const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true, // Enable autoplay
  speed: 1500, //smooth behavior of autoplay
  autoplaySpeed: 3000, //time for autoplay
  responsive: [
    {
      breakpoint: 600,
      settings: {
        autoplay: true, // Enable autoplay
        speed: 1500, //smooth behavior of autoplay
        autoplaySpeed: 3000, //time for autoplay
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots: true,
      },
    },
    {
      breakpoint: 1024,
      settings: {
        autoplay: true, // Enable autoplay
        speed: 1500, //smooth behavior of autoplay
        autoplaySpeed: 3000, //time for autoplay
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true,
        dots: true,
      },
    },
  ],
};

function TestimonialSlider() {
  return (
    <div className={styles.container}>
      <Slider {...settings}>
        {slidePeople.map((item, index) => (
          <div key={index} className={styles.card}>
            <div className={styles.imageContainer}>
              <img
                src={item.image}
                alt={item.name}
                className={styles.roundedImage}
              />
            </div>
            <h3 className={styles.name}>{item.name}</h3>
            <p className={styles.description}>{item.text}</p>
          </div>
        ))}
      </Slider>
    </div>
  );
}
export default TestimonialSlider;

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript next react-slick

Link to this answer
Share Copy Link

Contributed on Sep 15 2023

Powerful Petrel

0 Answers Avg Quality 2/10

react next js react-slick slick-carousell

Contents

More Related Answers

react next js react-slick slick-carousell

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.