swiper 슬라이드 사용방법 (feat. nuxt.js, wordrdss)

By
markettraders
-
0
13543

swiper 슬라이드는 요즘 많이 사용하고 있는 슬라이드 중 하나인거 같습니다. 예전에는 bxslider, flickity 등을 많이 사용하였는데 최근 swiper 로 제작을 많이 사용하는 거 같아서 저도 이번에 적용하여 사용해보았습니다. swiper는 쉽게 사용가능하고 스와이프가 지원하며 모바일에도 사용이 가능합니다. 더 자세한 내용은 swiper 공식 홈페이지를 참고 부탁드립니다.

swiper 설치방법

1. Cdn 으로 연결

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

2. 다운로드

https://unpkg.com/swiper/ 여기에서 위의 파일 swiper-bundle.min.css, swiper-bundle.min.js 파일을 다운로드 받아서 셋팅하시면 됩니다.

워드프레스에서 셋팅하실 경우는 function.php 에서 아래와 같이 셋팅해주시면 됩니다.

function my_scripts() {
    // CSS
    wp_enqueue_style( 'swiper-style', get_stylesheet_directory_uri() . '/assets/css/swiper-bundle.min.css', array(), '0.0.1' );
	 // JS
    wp_enqueue_script( 'swiper-script', get_stylesheet_directory_uri() . '/assets/js/swiper-bundle.min.js', array( 'jquery' ), '20201031' );
   }
add_action( 'wp_enqueue_scripts', 'my_scripts', 100 );

3. npm에서 설치

npm 에서 swiper 를 설치하실 수 있습니다. 

$ npm install swiper vue-awesome-swiper

저는 nuxt.js 프레임워크에서도 셋팅을 해보았는데요. 최신 버전에서는 사용하는데 오류가 발생되어어 아래 버전으로 설치했습니다.
“swiper”: “^5.3.7”,
“vue-awesome-swiper”: “^4.1.0”,

우선 plugin 폴더에 swiper.js 를 추가합니다.

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

이후 nuxt.config.js plugins 에 swiper.js 를 추가해줍니다.

// nuxt.config.js
plugins: [
    { src: '~/plugins/swiper.js', ssr: false }
  ],

.vue 파일에서는 아래와 같이 작성하여 사용했습니다. slides 는 axios 로 요청받아 출력했습니다. axios 요청 구문은 생략했습니다.

<template>
  <div v-swiper:mySwiper="swiperOption" class="swiper-container">
    <div class="swiper-wrapper">
      <div v-for="(slide, index) in slides" :key="index" class="swiper-slide">
        .....
      </div>
    </div>
    <div class="swiper-pagination" v-if="slides.length > 1"></div>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data() {
      return {
        slides: '',
        swiperOption: {
          loop: false,
          slidesPerView: 2,
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets: true,
            dynamicMainBullets : 2
          },
          //반응형
          breakpoints: {
            // when window width is >= 480px
            480: {
              slidesPerView: 2,
              spaceBetween: 10
            },
            // when window width is >= 640px
            640: {
              slidesPerView: 3,
              spaceBetween: 20
            },
            1264: {
              slidesPerView: 4,
              spaceBetween: 30
            }
          }
        },
      }
    },
  }
</script>

swiper 활용방법

이제 셋팅을 다 하셨으면 swiper 를 사용해봅시다.

swiper html 레이아웃

아래와 같이 마크업을 하시면 레이아웃을 셋팅이 가능합니다. 10개의 슬라이드와 페이지네이션을 구성하였습니다.

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>

style 셋팅

<style>
  html,
  body {
    position: relative;
    height: 100%;
  }

  body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
  }
  .swiper-container {
    width: 100%;
    height: 300px;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fafafa;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
</style>

js 로 swiper 초기화

pagination 에 클릭이 가능하도록 간단하게 셋팅하였습니다. 

<script>
  var swiper = new Swiper('.swiper-container', {
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  });
</script>

swiper 결과

swiper.js 를 사용하여 10개의 슬라이드와 페이지네이션으로 구성된 슬라이드를 셋팅했습니다. 이밖에도 다양한 샘플을 활용하여 슬라이드를 구성할 수 있습니다. 더 자세한 내용은 아래 링크를 참고해주세요. https://swiperjs.com/demos/