Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
index.js 1.26 KiB
Newer Older
  • Learn to ignore specific revisions
  • import React from 'react';
    import Slider from "react-slick";
    import "slick-carousel/slick/slick.css";
    import "slick-carousel/slick/slick-theme.css";
    import Card from '../TestimonyCard'
    import testimoniesList from '@site/static/testimoniesList.json'
    import styles from './styles.module.css'
    
    function SampleNextArrow(props) {
      const { onClick } = props;
      return (
        <div
          className={styles.arrow + ' ' + styles.right}
          onClick={onClick}
        />
      );
    }
    
    function SamplePrevArrow(props) {
      const { onClick } = props;
      return (
        <div
          className={styles.arrow + ' ' + styles.left}
          onClick={onClick}
        />
      )
    }
    export default function TestimoniesCarousel() {
      // https://react-slick.neostack.com/docs/api/
      const settings = {
        accessibility: true,
        nextArrow: <SampleNextArrow />,
        prevArrow: <SamplePrevArrow />,
        infinite: false,
        autoplay: true,
        dots: true,
        speed: 500,
        centerMode: true,
        slidesToShow: 1,
        slidesToScroll: 1,
      };
    
      return (
        <section >
          <div className={styles.section}>
            <h2 className={styles.title}> Clients</h2>
            <Slider {...settings}>
            {testimoniesList.map((props, idx) => (
              <Card key={idx} {...props} />
            ))}
            </Slider>
          </div>
        </section>
      );
    }