swiper纵向切换效果（每次滚动一小个方块）

因为上一篇文档在介绍vue项目中使用swiper的方法，所以这个例子我直接在vue项目里写的。当然html页面里和这个差不多。

话不多说，上代码。slide里面的样式和内容可以根据自己的需求去写，我主要是为了展示功能，就写了一个简单的效果。

<!-- 组件的模板 -->
<template>
    <div class="car">

        <!-- 第二个swiper -->
        <div class="swiper2">
            <swiper :options="swiperOption2">
                <swiper-slide>
                    <div>第一个</div>
                </swiper-slide>
                <swiper-slide>
                    <div>第二个</div>
                </swiper-slide>
                <swiper-slide>
                    <div>第三个</div>
                </swiper-slide>
                <swiper-slide>
                    <div>第四个</div>
                </swiper-slide>
                <swiper-slide>
                    <div>第五个</div>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<!-- 组件的模型 -->
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        // 组件的名称
        name: "car",
        data() {
            return {
                swiperOption2:{
                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false,
                    },
                    loop: true,
                    direction: 'vertical',
                    slidesPerView: 'auto',
                }
            }
        },
        components: {
            swiper,
            swiperSlide,
        },
    }
</script>

<!-- 组件的样式 -->
<style scoped>
    .swiper2{
        width: 300px;
        height: 600px;
        margin: 20px auto;
    }
    .swiper2 .swiper-container{
        height: 100%;
    }
    .swiper2 .swiper-slide{
        height: 200px;
    }
    .swiper2 .swiper-slide div{
        box-sizing: border-box;
        height: 100%;
        line-height: 200px;
        background-color: lightblue;
        text-align: center;
        border-bottom: 1px solid #e5e5e5;
    }
</style>