๋ชฉ๋กReactSlide (2)
๐ค ์์งlog ๐ค
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ { useState ์ useEffect } ๋ฅผ ์ฌ์ฉํด์ ์ง์ ๊ตฌํํด๋ณด๊ธฐ๋ก ํ์๋ค ! ๐ฅ ๊ทธ์ ์๋ react-bootstrap์ผ๋ก๋ง ํด๋ดค๋ํฐ๋ผ,, ์กฐ๊ธ ๊ฑฑ์ ํ๋๋ฐ ์ญ์๋ ์ด๋ ค์ ์ง๋ง ์ ๋ณด๋ ๋ง์๊ณ , ์ด๊ฒ ์ ๊ฒ ์๋ก ์๋ํด๋ณด๋ ์ฌ๋ฏธ๋์์๋ค -๐ ๐ ๊ตฌํ ์ฝ๋ import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; import { SLIDE_DATA } from "datas/slide"; const Banner = () => { const [currentSlide, setCurrentSlide] = useState(..
์ข ์ฐ ๋ก ์นดํ ๊ณ ๋ฆฌ ์ด๋ ๋ฐ ํฐ์น์ฌ๋ผ์ด๋๋ฅผ ๊ตฌํํด์ผ ํ๋ ์ํฉ์ด์๋๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ์์ด ์ฒ์๋ถํฐ ๊ตฌํํ๊ณ ์ถ์์ง๋ง ์์ง ๋ด์ค๋ ฅ์ผ๋ก ๋ฌด๋ฆฌ,, ์ใธใ ;,, ์ฌ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋ง์์ง๋ง ๋๋ Swiper ์ผ๋ก ๊ตฌํํด๋ณด๊ธฐ๋ก ํ์๋ค ! ๐ Swiper ์ค์น npm install swiper ๐ Swiper ์์ ์ฝ๋ import { Swiper, SwiperSlide } from 'swiper/react'; import { Pagination, Mousewheel, Keyboard } from 'swiper'; import 'swiper/css'; import 'swiper/css/pagination'; function () { return ( { console.log(swiper.activeIndex); }} ..