Swiper

[필수] INSTALL

npm i swiper (npm으로만 인스톨 가능)

 

[필수] IMPORT

import { Swiper, SwiperSlide } from 'swiper/react'

import SwiperCore, { Pagination, Autoplay } from 'swiper';

 

[필수] SWIPER CORE(부가기능 사용여부: pagination, autoplay 등)

SwiperCore.use([ Pagination, Autoplay ]);

 

[필수] CODE

            <Swiper

                className={styles.swiper_container}

                wrapperTag='ul' 

                speed={2000}

                autoplay={{delay: 2000, disableOnInteraction: false}}

                pagination={{clickable: true}}

                loop={true}

                spaceBetween={30}

                slidesPerView={1}

                >

                {BannerItems.map(item => {

                    return (

                        <SwiperSlide key={item.id} tag="li">

                            <a href="">

                                <img src={item.src} alt="banner"/>

                            </a>

                        </SwiperSlide>

                    )

                })}

            </Swiper>

 

사용컴포넌트: Swiper, SwiperSlide

 

PROPS: wrapperTag, spaceBetween, slidesPerView, autoplay, speed, pagination, loop

 

CUSTOM STYLING:

사용하는 css전처리기에 따라 조금 다른 것 같다. 스와이퍼 컴포넌트(Swiper: swiper-container / SwiperSlide: swiper-slide)에 고유 class가 정해져 있고 이 class에 스타일링을 적용해서 적용이 될때가 있고, 현재 POSTCSS사용중인데 적용이 안된다. 컴포넌트 안에 따로 custom class명을 붙혀 스타일링을하게 되면 적용된다.

결론: module.css는 Swiper컴포넌트 스타일링에 접근할 수 없다. 일반 .css로만 가능한 듯 싶다.