Swiper
μ΄λ²μ νλ‘μ νΈ μ§ννλ©΄μ μ¬μ©ν Swiper λΌμ΄λΈλ¬λ¦¬μ λν΄ μ μ΄λ³΄λ €κ³ ν©λλ€.
곡μ ννμ΄μ§λ μλμ κ°μ΅λλ€.
https://swiperjs.com/react
μ κ° μμ¦μ Reactλ§ μ¬μ©νκ³ μκΈ° λλ¬Έμ Reactλ°©μμΌλ‘ μμ±νμμ΅λλ€.
μ€μΉ
npm i swiper
κΈ°λ³Έ ꡬμ±
곡μ ννμ΄μ§μ λμμλ μμ€μμ μ΄κ²μ κ² μμ ν΄ λ΄€μ΅λλ€.
κ°λ¨ν μ€λͺ νκ³ , μ κ° μ¬μ©νλ λ°©λ² μ€λͺ νλ €κ³ ν©λλ€.
- modules : κΈ°λ³Έ Swiper μΈμ λͺ¨λμ μΆκ°νμ¬ λμμΈμ μμ ν μ μμ΅λλ€.
Navigation, Pagination, Scrollbar μ΄ 3κ°μ§ λͺ¨λμ μΆκ°ν μνμ λλ€.
μ¬μ©λ λͺ¨λλ€μ μΆκ°λ‘ μ΅μ μ μ€μ ν μ μμ΅λλ€.
μ μμλ‘λ paginationκ³Ό scrollbarμ μ΅μ μ΄ μΆκ°λ μνμ λλ€. - spaceBetween : μ¬λΌμ΄λμ μ¬λΌμ΄λ μ¬μ΄ κ°κ²©μ
λλ€.
μλ slidesPerView κ°μ΄ μμ κ²½μ°μλ μ¬λΌμ΄λ νλκ° μ 체λ₯Ό μ°¨μ§νκΈ° λλ¬Έμ
slidesPerView μ΅μ μ μ¬μ©ν κ²½μ° μ¬μ©νμλ©΄ λ©λλ€. - slidesPerView : νλμ νλ©΄μ λͺ κ°μ μ¬λΌμ΄λλ₯Ό 보μ¬μ€μ§ μ ν΄μ€λλ€.
κ°μ΄ μμ κ²½μ° μ 체λ₯Ό ν κ°μ μ¬λΌμ΄λκ° μ°¨μ§νκ² λ©λλ€. - navigation : navigationμ΅μ μ¬μ© μ 무μ λλ€.
- pagination : paginationμ΅μ μ¬μ© μ 무μ λλ€.
- scrollbar : scrollbarμ΅μ μ¬μ© μ 무μ λλ€.
- onSwipeer : Swiperκ° μ€ν λμ λ, ν¨μλ₯Ό μ€νν μ μμ΅λλ€.
- onSlideChange : Slideλ₯Ό λ°κΏ¨μ λ, ν¨μλ₯Ό μ€νν μ μμ΅λλ€.
μ¬μ©λ μ΅μ μ λν μ€λͺ μ κ°λ¨ν νμκ³ , ν¨μ¬ λ λ§μ μ΅μ μ΄ μλλ° μμΈν μ¬νμ μλ 곡νμ λμμμ΅λλ€.
https://swiperjs.com/swiper-api
μμ λ΄μ©λ§μΌλ‘λ κΈ°λ³Έμ μΈ Swiperλ₯Ό ꡬμ±ν μ μμ κ²μΌλ‘ 보μ λλ€.
곡νμ Demoλ‘ μμλ λμμμΌλ μ°Έκ³ νμλ©΄ λ λ―ν©λλ€.
μ μ© μ¬λ‘
import { Mousewheel, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
function Swiper() {
return (
<Swiper
direction="vertical"
pagination={{
clickable: true,
el: '.customPagination',
dynamicBullets: true,
dynamicMainBullets: 5,
}}
mousewheel
modules={[Pagination, Mousewheel]}
allowTouchMove={false}
onSlideChange={swiper => {
dispatch(...);
}}
style={{
width: `${String(80 * scale)}vh`,
height: `${String(80 * scale)}vh`,
minWidth: '482px',
minHeight: '482px',
}}
>
{data.map(value => (
<SwiperSlide key={value.id}>
<SlideComponent
img={value}
key={value.id}
setActive={setActive}
/>
</SwiperSlide>
))}
</Swiper>
);
}
export default Swiper;
μ€μ λ λ 볡μ‘νμ§λ§, λ§μ΄ μλ΅νκ³ μ§μμ κ°λ¨νκ² Swiperμμ€λ§ μ€λͺ νλ €κ³ ν©λλ€.
μ²μμ Swiper λΌμ΄λΈλ¬λ¦¬ μ¬μ©ν λ, λκ° μ€μ λ‘ μ¬μ©ν μμλ₯Ό μ°Ύκ³ μΆμλλ° λ§μ΄ μμ΄μ μ‘°κΈ μνμ°©μ€λ₯Ό κ²ͺμκ³ , μ‘°κΈμ λ λμμ΄ λμ§ μμκΉ μΆμ΅λλ€.(λμ€μ λ΄κ° λ€μ μ¬μ©ν λλ 보면 μ’κ³ ...)
- direction : κ°μ 'vertical'μ μ€μ κΈ°μ‘΄μ κ°λ‘λ‘ μμ§μ΄λ μ¬λΌμ΄λλ₯Ό μΈλ‘λ‘ λ°κΏ¨μ΅λλ€.
- pagination : paginationμ μ¬μ©νμκ³ , 4κ°μ§ μ΅μ
μ μΆκ°νμμ΅λλ€.
- clickable : pagination μ¬μ©μΌλ‘ μκΈ΄ Bulletμ λλ¬μ μ¬λΌμ΄λλ₯Ό μ΄λν μ§μ λν μ΅μ μ λλ€.
- el : κΈ°λ³ΈμΌλ‘ μ 곡νλ paginationμ 컀μ€ν λ§μ΄μ§νλ €κ³ μΆκ°νμμ΅λλ€.
- dynamicBullets : μ¬μ©λλ Bulletμ κ°μ‘°νκΈ° μν μ΅μ μ λλ€.
- dynamicMainBullets : μμμ κ°μ‘°ν Bulletμ κ°μλ₯Ό μ ν΄μ€λλ€.
<div className="customPagination" />
- mousewheel : λ§μ°μ€ ν μ μ¬μ©ν΄μ λ€μ μ¬λΌμ΄λλ‘ λμ΄κ° μ μλλ‘ ν΄μ€λλ€.
- allowTouchMove : μ¬λΌμ΄λλ₯Ό λλκ·Έν΄μ λκΈ°κ² λλ©΄ μ¬λΌμ΄λκ° λμ΄κ°λλ°, μ΄λ₯Ό λ§κΈ° μν΄ μ¬μ©νμ΅λλ€.
- style : Swiperμ styleμ μ€μ μ§μ cssλ₯Ό μμ νμμ΅λλ€.
μΆκ°λ‘ Slideλ₯Ό Componentλ‘ λλ μ κ°λ°νμμ΅λλ€.
νΉμλ CSSλ₯Ό μμ νλ €κ³ νλλ° μ μ©μ΄ μλμλ λΆλ€μ μλ‘ λ§λ cssνμΌμ΄ μλ global.cssμ μ μ©νμ ¨λμ§ νμΈνμκ³ , devtool μ°μ΄λ³΄λ©΄μ μνλ μ€νμΌμ !important μ μ΄μ£Όμλ©΄ λ κ²μ λλ€.
λ§μ΄ μ¬μ©λ λ§ν λΌμ΄λΈλ¬λ¦¬μ΄μ§ μλ μΆμ΅λλ€.
μΉνμ΄μ§ λμλ€λλ€λ³΄λ©΄ λ§μ΄ 보μ΄λ κΈ°λ₯μ΄κΈ°λ νκ³ , νμ©λλ λμ 보μ λλ€.
'Front-End > Library' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
Library] SWR : μμ©_Mutate & Revalidation (0) | 2023.07.03 |
---|---|
Library] SWR : μμ© (0) | 2023.07.03 |
Library] SWR (0) | 2023.07.03 |
Library] Axios : μμ© (0) | 2023.06.28 |
Library] Axios (0) | 2023.06.27 |