 <style>
    [v-cloak] {
        display: none;
    }
    html, body {
        margin: 0;
    }
    h2, h3 {
        text-align: center;
    }
    button {
        background-color: skyblue;
        color: white;
        padding: 0.5rem 1.2rem;
        font-size: 1rem;
        border-radius: 0.3rem;
        transition: all 0.25s ease;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        outline: none;
        appearance: none;
        border: none;
        cursor: pointer;
    }
    button:hover {
        background-color: #fff;
        color: #000;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
        transform: scale(1.05);
    }
    button:active {
        background-color: #ddd;
        color: #333;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        transform: scale(1);
    }
    .swiper {
        height: 200px;
        margin-bottom: 80px;
    }
    .swiper-wrap > div {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 48px;
        color: #fff;
    }
    .swiper-wrap > div:nth-child(3n) {
        background-color: skyblue;
    }
    .swiper-wrap > div:nth-child(3n + 1) {
        background-color: yellowgreen;
    }
    .swiper-wrap > div:nth-child(3n + 2) {
        background-color: rosybrown;
    }
    #append_child {
        text-align: center;
        margin-bottom: 80px;
    }
    #swiper_children_size {
        height: 400px;
    }
    #swiper_children_size .slide-1 {
        height: 200px;
    }
    #swiper_children_size .slide-2 {
        height: 150px;
    }
    #swiper_children_size .slide-3 {
        height: 100px;
    }
    #swiper_children_size .slide-4 {
        height: 350px;
    }
    .swiper-nested-inner {
        width: 100%;
        height: 100%;
        margin-bottom: 0;
    }
</style>
<template>
<h3>Vertical</h3>
<swiper id="swiper_vertical"
        :pagination-visible="true"
        @slide-change-start="onSlideChangeStart"
        @slide-change-end="onSlideChangeEnd"
        @slide-revert-start="onSlideRevertStart"
        @slide-revert-end="onSlideRevertEnd"
        @slider-move="onSliderMove">
    <div class="slide-1">↑<br>o<br>↓</div>
    <div v-for="n in [2,3]">Page {{n}}</div>
</swiper>
<h3>Horizontal</h3>
<swiper id="swiper_horizontal"
        :pagination-visible="true"
        direction="horizontal">
    <div>←o→</div>
    <div v-for="n in [2,3]">Page {{n}}</div>
</swiper>
<h3>Different children size</h3>
<swiper id="swiper_children_size">
    <div class="slide-1">↑<br>o<br>↓</div>
    <div v-for="n in [2,3,4]" class="slide-{{n}}">Page {{n}}</div>
</swiper>
</template>

<script>
import {swiper} from "components/swiper/"

export default{
	components:{
		swiper
	},
 	methods:{
 		onSlideChangeStart: function (currentPage) {
            console.log('onSlideChangeStart', currentPage);
        },
        onSlideChangeEnd: function (currentPage) {
            console.log('onSlideChangeEnd', currentPage);
        },
        onSlideRevertStart: function (currentPage) {
            console.log('onSlideRevertStart', currentPage);
        },
        onSlideRevertEnd: function (currentPage) {
            console.log('onSlideRevertEnd', currentPage);
        },
        onSliderMove: function (offset) {
            console.log('onSliderMove', offset);
        },
        prependSlide: function (slideText) {
            this.slides.unshift(slideText);
        },
        appendSlide: function (slideText) {
            this.slides.push(slideText);
        },
        removeSlide: function () {
        }
 	}
}
</script>