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

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

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

inline ad

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/

RECENT POSTS

개미를 퇴치하는 자연적인 방법 중 가장 효과적인 방법 6가지

개미를 자연스럽게 퇴치하는 여러 가지 방법 중 가장 효과적인 몇 가지 방법을 소개하겠습니다. 이 방법들은 모두 집에서 쉽게 구할 수 있는 재료를 사용하여 개미를...

부심장을 지키는 올바른 식단: 먹으면 좋은 음식과 나쁜 음식

부정맥 환자는 심장 건강을 유지하고 증상을 관리하기 위해 특정 음식을 피하고, 심장 건강에 좋은 음식을 섭취하는 것이 중요합니다. 다음은 부정맥 환자가 피해야 나쁜 음식과...

부정맥 arrhythmia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 부정맥(Arrhythmia)은 심장의 정상적인 리듬이 불규칙해지거나 비정상적으로 빨라지거나 느려지는 상태를 말합니다. 이는 심장의 전기적 신호 전달에 문제가 생겨 발생하며, 다양한 원인과 증상을 가지고 있습니다. 원인 부정맥의 원인은...

폐렴 pneumonia: 정의, 원인, 증상, 진단 및 검사, 치료 방법, 예방 방법, 주의사항, 생활 습관

정의 폐렴(Pneumonia)은 폐의 폐포(air sacs)에 염증이 생겨 액체나 고름이 차는 질환입니다. 주로 세균, 바이러스, 곰팡이 등의 감염에 의해 발생하며, 심한 경우 생명을 위협할 수 있습니다. 원인 폐렴의...