[React] React Slick을 활용하여 캐러셀(Carousel) 만들기

Material UI의 캐러셀을 활용하려다가 React Slick을 많이 사용하는거 같아 사용해보았다.

 

 

설치

사용하기에 앞서 공식 사이트를 참고하여 설치를 한다.

https://react-slick.neostack.com/docs/get-started

Neostack

npm install react-slick --save

 

기본 틀

여러가지 종류의 스타일이 있는데 Multiple items 라는 이름의 스타일을 사용했다.

https://react-slick.neostack.com/docs/example/multiple-items/

Neostack

// Multiple items - basic 

import React, { Component } from "react";
import Slider from "react-slick";

export default class MultipleItems extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 3,
      slidesToScroll: 3
    };
    return (
      <div>
        <h2> Multiple items </h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
          <div>
            <h3>7</h3>
          </div>
          <div>
            <h3>8</h3>
          </div>
          <div>
            <h3>9</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

 

 

CSS

.slick-slide{
  margin:10px;
}
.slick-slide img{
  width:100%;
  border: 2px solid #fff;
}

React Slick은 위와 같이 css 적용을 위한 클래스명이 달라 어떻게 적용해야 할지 너무 막막했다. 

결국, code pen 사이트에서 React Slick을 검색하여 CSS를 참고했다.

 

 

참고한 사이트

https://codepen.io/swetankrathi/pen/OyRZxL

Slick carousel example

 

완성

 

캐러셀 이미지 - 20개의 데이터를 불러왔다. 잘 안보이지만 밑에 점도 있다.

캐러셀

// Carousel.tsx

import React, { useState, useEffect } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import "./Carousel.scss";
import Poster from "./Poster";
import LeagueStart from "../../apis/leagues/LeagueStart";

function Carousel() {
  const [items, setItems] = useState<any[]>([]);

  useEffect(() => {
    (async () => {
      const res = await LeagueStart();
      console.log(res);
      console.log(res[0].id);
      setItems(res);
    })();
  }, []);

  const settings = {
    dots: true,
    centerMode: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 3
  };

  return (
    <div id="carousel">
      <Slider className="carousel" {...settings}>
        {items.map(item => {
          return <Poster key={item.id} item={item} />;
        })}
      </Slider>
    </div>
  );
}
export default Carousel;

// Carousel.scss

#carousel {
  width: 100%;
  padding-top: 20px;
  text-align: center;
}
.slick-list {
  height: 500px;
}
.carousel {
  width: 90%;
  margin: 0px auto;
}
.slick-slide {
  margin: 10px;
}

.slick-slide img {
  width: 100%;
}

.wrapper .slick-dots li button:before {
  font-size: 20px;
  color: white;
  margin-top: 100px;
}

API

// LeagueStart.ts
// axios로 정보를 불러오기 위한 API

import React, { useState } from "react";
import axios from "axios";

async function LeagueStart() {


  const response = await axios({
    url: `https://jsonplaceholder.typicode.com/comments?_page=0&_limit=20`,
    method: "get",
    headers: {
    }
  })
    .then(res => {
      // console.log(res);
      return res.data;
    })
    .catch(err => {
      console.log(err);
    });
  return response;
}

export default LeagueStart;

포스터

// Poster.jsx
// Material UI 카드 컴포넌트를 사용했기 때문에 inline css 사용

import * as React from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Typography from "@mui/material/Typography";
import posterSample from "assets/images/posterSample.png";

/* eslint-disable react/prop-types */
function Poster({ item: { id, email, body } }) {
  return (
    <Card
      id="card"
      sx={{
        width: 230,
        height: 450,
        padding: 0,
        marginTop: 3,
        textAlign: "center"
      }}
    >
      <CardMedia
        component="img"
        height="300"
        image={posterSample}
        alt="green iguana"
      />
      <CardContent className="poster-content">
        <Typography gutterBottom variant="h5" component="div">
          {id}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {email}
          <br />
          {body}
        </Typography>
      </CardContent>
    </Card>
  );
}
export default Poster;