Next.js에서 Swiper.js 사용해서 FullPage 효과 내기

Swiper.js는 화면을 부드럽게 Slide 하는데 널리 쓰이는 라이브러리이다.

Swiper - The Most Modern Mobile Touch Slider

 

 

Swiper에서 마우스휠 + Vertical 조합을 활용하면 FullPage 효과를 낼 수 있다. 예전에 FullPage.js를 쓴 적도 있는데 이것보다 훨씬 쉽고 간단하게 만들 수 있는 것 같다. 

 

개인적으로 FullPage를 사용하는 것을 선호하지 않는다. 다양한 해상도 화면에서 세로 길이가 다른데, 이 모든 해상도 조건에서 element가 짤려보이지 않으려면 배경만 사용하거나 Element를 극단적으로 중앙에 작게 배치되도록 해야 한다. 따라서 홈페이지의 conceptual한 메시지를 전달하는 데에만 유효한 UI/UX라고 생각하는 편이다.

Swiper Demos

 

Next.js에서 Swiper.js 사용했던 예제 코드를 기록해본다.

import React, { useEffect, useRef, useState } from "react";
import styled from "@emotion/styled";
import { Swiper, SwiperSlide, useSwiper } from 'swiper/react';
import { Mousewheel, Pagination } from "swiper";
import TravelSlide1 from "./TravelSlide1";
import TravelSlide2 from "./TravelSlide2";
import TravelSlide3 from "./TravelSlide3";
import 'swiper/css';
import "swiper/css/pagination";



const Container = styled.div`
    display: flex;
    position: relative;
    flex-direction: column;
`;
const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 100px;
    padding-top: 100px;
    background-color: blueviolet;
`

const StyledSwiper = styled(Swiper)`
    width: 100%;
    height: 100vh;
`
const StyledSwiperSlide = styled(SwiperSlide)`
`


const Example = () => {


    return (
        <>
            <StyledSwiper
                className="mySwiper"
                direction={"vertical"}
                spaceBetween={30}
                slidesPerView={1}
                mousewheel={true}
                pagination={{
                    clickable: true,
                }}
                modules={[Mousewheel, Pagination]}
                onSlideChange={(swiper:any) => console.log(swiper)}
                onSwiper={(swiper: any) => swiper.mousewheel.enable()}
            >
                <StyledSwiperSlide>
                    {({isActive}) => isActive && <TravelSlide1/>}
                </StyledSwiperSlide>
                <StyledSwiperSlide>
                    {({isActive}) => isActive && <TravelSlide2/>}
                </StyledSwiperSlide>
                <StyledSwiperSlide>
                    {({isActive}) => isActive && <TravelSlide3/>}
                </StyledSwiperSlide>
                <StyledSwiperSlide>Slide 5</StyledSwiperSlide>
                <StyledSwiperSlide>Slide 6</StyledSwiperSlide>
                <StyledSwiperSlide>Slide 7</StyledSwiperSlide>
                <StyledSwiperSlide>Slide 8</StyledSwiperSlide>
                <StyledSwiperSlide>Slide 9</StyledSwiperSlide>
            </StyledSwiper>
        </>

    )
}

export default Example;