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/