TIL 02.07 - 최종 프로젝트 1주차

[react-slick] carousel / 배너 만들기

설치

-     npm i react-slick / yarn add react-slick

-     css import

import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";

 

사용하기

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";

function Home() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 5000,
    slidesToShow: 1,
    slidesToScroll: 1,
    // autoplay: true,
    cssEase: "linear",
    autoplaySpeed: 0,
  };

  return (
      <div style={{ height: "200px", backgroundColor: "pink" }}>
        <h2>Single Item</h2>
        <Slider {...settings}>
          <div>
            <h3>slide 1</h3>
          </div>
          <div>
            <h3>slide 2</h3>
          </div>
          <div>
            <h3>slide 3</h3>
          </div>
          <div>
            <h3>slide 4</h3>
          </div>
          <div>
            <h3>slide 5</h3>
          </div>
        </Slider>
      </div>
  );
}

export default Home;