vue-awesome-swiper使用

头像
赵不悔
    阅读 27 分钟
    1

    vue-awesome-swiper

    我喜欢的一款轮播插件，他有多个选择！而且支持手持滑动
    所以我用到了今天。

    安装

    本人说明一点：为什么不用4.1.1
    答：vue-awesome-swiper v4.1.1版 autoplay、effect等无效问题至今未解决

    cnpm i vue-awesome-swiper@3.1.3 -S

    引入

    全局引入

    import VueAwesomeSwiper from 'vue-awesome-swiper' 
import 'swiper/dist/css/swiper.css' 
Vue.use(VueAwesomeSwiper)

    单独引入

    import Vue from 'vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import "swiper/dist/css/swiper.css"
//或者
require('swiper/dist/css/swiper.css')

    测试

    <template>
  <swiper class="swiper">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</swiper-slide>
  </swiper>
</template>

    A组

    我最喜欢的轮播这款，在我的MXLOGO保留至今！
    image.png

        <swiper :options="swiperOption">
        <swiper-slide>
            <a href="javascrpt:;" target="_blank">
                  <img src="./assets/1.jpg">
            </a>
        </swiper-slide>
        <swiper-slide>
            <a href="javascrpt:;" target="_blank">
                <img src="./assets/1.jpg">
            </a>
        </swiper-slide>
        <swiper-slide>
            <a href="javascrpt:;" target="_blank">
                <img src="./assets/1.jpg">
            </a>
        </swiper-slide>
    </swiper>

    <script>
    export default {
        data() {
            return {
                swiperOption: {
                    spaceBetween: 15, //图片之间的间距
                    centeredSlides: true,  //居中还是从图1开始
                    slidesPerView: "auto", //一屏幕显示几个? 数字或者默认  auto 自动。 
                    notNextTick: true, //true:加载后允许触发事件 false:加载后不可以触发事件
                    loop: true, //循环吗
                    initialSlide: 0,  //从第几个开始
                    autoplay: {
                        delay: 4000, //等4秒下一个
                        disableOnInteraction: false // 中间滑动一下，取消自动吗？
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    }, // 下按钮
                    speed: 800, //滑动时候动画的速度
                    paginationClickable: true //下面按钮让点吗
                }
            }
        }
    }
</script>

    B组

    我准备要用这个，但是突然一想！还是算了
    这里有一个知识点
    this.$refs.swiperTop.$swiper如果无效，那么就换this.$refs.swiperTop.$el.swiper
    image.png

    <template>
    <div class="thumb-example">
        <!-- swiper1 -->
        <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
            <swiper-slide class="slide-1">
                <img src="./assets/1.jpg">
            </swiper-slide>
            <swiper-slide class="slide-2">
                <img src="./assets/2.jpg">
            </swiper-slide>
            <swiper-slide class="slide-3">
                <img src="./assets/3.jpg">
            </swiper-slide>
            <swiper-slide class="slide-4">
                <img src="./assets/4.jpg" />
            </swiper-slide>
            <swiper-slide class="slide-5">
                <img src="./assets/5.jpg" />
            </swiper-slide>
            <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        </swiper>
        <!-- swiper2 Thumbs -->
        <swiper class="swiperbtm gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
            <swiper-slide class="slide-1">
                <img src="./assets/1.jpg">
            </swiper-slide>
            <swiper-slide class="slide-2">
                <img src="./assets/2.jpg">
            </swiper-slide>
            <swiper-slide class="slide-3">
                <img src="./assets/3.jpg">
            </swiper-slide>
            <swiper-slide class="slide-4">
                <img src="./assets/4.jpg" />
            </swiper-slide>
            <swiper-slide class="slide-5">
                <img src="./assets/5.jpg" />
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                swiperOptionTop: {
                    loop: true,
                    loopedSlides: 5, // looped slides should be the same
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                },
                swiperOptionThumbs: {
                    loop: true,
                    loopedSlides: 5, // looped slides should be the same
                    spaceBetween: 30,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    touchRatio: 0.2,
                    slideToClickedSlide: true
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                const swiperTop = this.$refs.swiperTop.$el.swiper
                const swiperThumbs = this.$refs.swiperThumbs.$el.swiper
                swiperTop.controller.control = swiperThumbs
                swiperThumbs.controller.control = swiperTop
            })
        }
    }
</script>

<style lang="less">
    .thumb-example {
        height: 480px;
        background-color: $black;
        position: relative;
    }

    .swiper {
        .swiper-slide {
            background-size: cover;
            background-position: center;

            &.slide-1,
            &.slide-2,
            &.slide-3,
            &.slide-4,
            &.slide-5 {
                img {
                    height: auto;
                    width: 100%;
                }
            }
        }

        &.gallery-top {
            width: 100%;
        }

        &.gallery-thumbs {
            height: 20%;
            box-sizing: border-box;
            padding: $gap 0;
        }

        &.gallery-thumbs .swiper-slide {
            width: 15%;
            height: 100%;
            overflow: hidden;
        }

        &.gallery-thumbs .swiper-slide-active {
            opacity: 1;
            overflow: hidden;
        }
    }

    .swiperbtm {
        position: absolute;

        .swiper-slide {
            background-size: cover;
            background-position: center;
                border: 3px solid #fff;
            &.slide-1,
            &.slide-2,
            &.slide-3,
            &.slide-4,
            &.slide-5 {
                img {
                    height: 100%;
                    width: auto;
                }
            }
        }

        &.gallery-top {
            height: 100%;
            width: 100%;
        }

        &.gallery-thumbs {
            height: 22%;
            box-sizing: border-box;
            bottom: 105px;
            background: linear-gradient(to top, rgba(0,0,0, 1), rgba(255, 255, 255, 0));
            padding: 5px;
        }

        &.gallery-thumbs .swiper-slide {
            width: 10%;
            height: 90%;
            overflow: hidden;
            min-width: 170px;
        }

        &.gallery-thumbs .swiper-slide-active {
            opacity: 1;
            overflow: hidden;
        }
    }
</style>

    基础左右滑动

    最基础的左右滑动，左侧滑动，下方按钮导航滑动，以及scroll的滑动定位
    image.png

    <template>
    <swiper class="swiper" :options="swiperOption" dir="rtl"><!--反方向排序-->
        <swiper-slide>
            <img src="./assets/1.jpg">
        </swiper-slide>
        <swiper-slide>
            <img src="./assets/2.jpg" />
        </swiper-slide>
        <swiper-slide>
            <img src="./assets/4.jpg" />
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>

        <div class="swiper-pagination" slot="pagination"></div>
        
        <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
</template>


<script>
    export default {
        data() {
            return {
                swiperOption: {
                    navigation: {
                        prevEl: '.swiper-button-prev', //左侧按钮
                        nextEl: '.swiper-button-next' //右侧按钮
                    },
                    pagination: {
                        el: '.swiper-pagination',//底部按钮导航
                        clickable: true,//默认可点击，false则是能看不能点
                        dynamicBullets: true,//是否css底部按钮从小变大，简单优化
                        type:'fraction',//底部按钮换成进度条方式还是数字方式progressbar/fraction
                    },
                    scrollbar: {
                        el: '.swiper-scrollbar',//scroll滑动
                        hide: true//滑动一下显示一下吗？
                    },
                    loop: true,//是否循环
                    grabCursor:true//css鼠标图标变成小拳头
                    effect: 'fade'//轮播特效渐变色
                    keyboard: {//键盘
                    enabled: true //开启吗
                    },
                    autoplay: {
            delay: 2500,// 2.5秒下一张
            disableOnInteraction: false
          },
          lazy: true,//开启加载
                }
            },
            autoHeight: true,//图片高度自适应
        }
    }
</script>



<style lang="less">
    .swiper-slide {
        img {
            width: 100%;
        }
    }
    
</style>

    基础左右滑动一屏看3个

    image.png

    <template>
    <swiper class="swiper" :options="swiperOption">
        <swiper-slide>
            <img src="./assets/1.jpg">
        </swiper-slide>
        <swiper-slide>
            <img src="./assets/2.jpg" />
        </swiper-slide>
        <swiper-slide>
            <img src="./assets/4.jpg" />
        </swiper-slide>

        <div class="swiper-pagination" slot="pagination"></div>

    </swiper>
</template>


<script>
    export default {
        data() {
            return {
                swiperOption: {
                    slidesPerView: 3,//一次看到三张一横屏 "auto"则是随宽度自身
                    centeredSlides: true,//第一个图片居中开始
                    spaceBetween: 20,//图片距离20
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true//支持点击
                    }
                }
            }
        }
    }
</script>

    文本scroll滑动

    注意一点！CSS必须这两个，可以是px也可以是vh
    image.png

    <template>
    <swiper class="swiper" :options="swiperOption">
        <swiper-slide class="text">
            <p>此处省略100万</p>
        </swiper-slide>
        <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
</template>

<script>
    export default {
        data() {
            return {
                swiperOption: {
                    direction: 'vertical',//垂直
                    slidesPerView: 'auto',//
                    freeMode: true,
                    scrollbar: {
                        el: '.swiper-scrollbar'
                    },
                    mousewheel: true
                }
            }
        }
    }
</script>

<style lang="less">
    .swiper{
        height: 500px;
        .text{
            height: auto;
        }
    }
</style>

    一次显示多个小图

    image.png

    <template>
    <swiper class="swiper" :options="swiperOption">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
        <swiper-slide>Slide 7</swiper-slide>
        <swiper-slide>Slide 8</swiper-slide>
        <swiper-slide>Slide 9</swiper-slide>
        <swiper-slide>Slide 10</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
    export default {
        data() {
            return {
                swiperOption: {
                    slidesPerView: 3,
                    slidesPerColumn: 2,
                    spaceBetween: 30,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    }
                }
            }
        }
    }
</script>

<style lang="less">
.swiper {
    .swiper-slide {
      height: 200px;
      background-color: #FFC0CB
    }
  }
</style>

    循环以及移位数量

    image.png

    <template>
    <div id="app">
        <swiper class="swiper" :options="swiperOption">
            <swiper-slide>1</swiper-slide>
            <swiper-slide>2</swiper-slide>
            <swiper-slide>3</swiper-slide>
            <swiper-slide>4</swiper-slide>
            <swiper-slide>5</swiper-slide>
            <swiper-slide>6</swiper-slide>
            <div class="swiper-pagination swiper-pagination-h" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                swiperOption: {
                    slidesPerView: 3, //一次显示3个
                    spaceBetween: 30, //他们的间距
                    slidesPerGroup: 1, //一次搬3个
                    loop: true, //循环吗
                    loopFillGroupWithBlank: true, //刷一屏3个，但是总共只有8个。第九个用不用补位？
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true //可以下方按钮点击吗
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                }
            }
        }
    }
</script>

<style>
    .swiper {
        height: 300px;
    }

    .swiper-slide {
        height: 260px !important;
        border: 1px solid #C0C0C0;
    }

    .swiper.vertical {
        background-color: beige;
    }
</style>

    3D旋转加投影

    <template>
    <div id="app">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                swiperOption: {
                    effect: 'cube',//3D立体开启开启
                    cubeEffect: {//立方体效果
                        shadow: true,//底部背影（投影）开启吗？
                        slideShadows: true,//图片旋转时候投影开启吗？
                        shadowOffset: 200,//为shadow设置投影位置高度
                        shadowScale: 0.8//底部影子的大小
                    },
                    pagination: {
                        el: '.swiper-pagination'
                    }
                }
            }
        }
    }
</script>

<style>
    .swiper {
        height: 300px;
    }

    .swiper-slide {
        height: 260px !important;
        border: 1px solid #C0C0C0;
    }

    .swiper.vertical {
        background-color: beige;
    }
</style>

    旋转

    image.png`

    <template>
    <div id="app">
        <swiper class="swiper" :options="swiperOption">
            <swiper-slide>Slide 1</swiper-slide>
            <swiper-slide>Slide 2</swiper-slide>
            <swiper-slide>Slide 3</swiper-slide>
            <swiper-slide>Slide 4</swiper-slide>
            <swiper-slide>Slide 5</swiper-slide>
            <swiper-slide>Slide 6</swiper-slide>
            <swiper-slide>Slide 7</swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                swiperOption: {
                    effect: 'coverflow',
                    grabCursor: true,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    coverflowEffect: {
                        rotate: 50,
                        stretch: 0,
                        depth: 100,
                        modifier: 1,
                        slideShadows: true
                    },
                    pagination: {
                        el: '.swiper-pagination'
                    }
                }
            }
        }
    }
</script>

<style>
    .swiper {
        height: 300px;
    }

    .swiper-slide {
        height: 260px !important;
        border: 1px solid #C0C0C0;
    }

    .swiper.vertical {
        background-color: beige;
    }
    
    
</style>

    Y轴旋转

    image.png

    <template>
    <swiper class="swiper" :options="swiperOption">
        <swiper-slide class="slide-1"><img src="./assets/1.jpg" ></swiper-slide>
        <swiper-slide class="slide-2"><img src="./assets/2.jpg" ></swiper-slide>
        <swiper-slide class="slide-3"><img src="./assets/3.jpg" ></swiper-slide>
        <swiper-slide class="slide-4"><img src="./assets/4.jpg" ></swiper-slide>
        <swiper-slide class="slide-5"><img src="./assets/5.jpg" ></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
</template>

<script>
    export default {
        data() {
            return {
                swiperOption: {
                    effect: 'flip',
                    grabCursor: true,
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                }
            }
        }
    }
</script>

    上下滑动一屏幕

    这个知识点其实重点在于css的定位

    <template>
    <swiper class="swiper" :options="swiperOption">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
        <swiper-slide>Slide 7</swiper-slide>
        <swiper-slide>Slide 8</swiper-slide>
        <swiper-slide>Slide 9</swiper-slide>
        <swiper-slide>Slide 10</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
    export default {
        data() {
            return {
                swiperOption: {
                    direction: 'vertical',//垂直开启
                    slidesPerView: 1,//滑动一屏幕
                    spaceBetween: 30,//图片距离
                    mousewheel: true, //鼠标滑轮开启吗
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    }
                }
            }
        }
    }
</script>

<style>
.swiper{
    height: 400px;
}
.swiper-slide{
    background: #ccc;
}
</style>

    批量创建多个轮播，而且无需创建单独ID

    
<template>
  <div class="swipers">
    <swiper
      class="swiper"
      ref="swipers"
      v-for="i in 2"
      :key="i"
      :options="swiperOption"
    >
      <swiper-slide v-for="i in 9" :key="i">Slide {{ i + 1 }}</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
    data() {
      return {
        swiperOption: {
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        }
      }
    }
  }
</script>

    单独标题轮播

    <template>
    <swiper class="swiper" :options="swiperOption">
        <div class="parallax-bg" slot="parallax-bg" data-swiper-parallax="-23%"></div>
        <swiper-slide>
            <div class="title" data-swiper-parallax="-100">Slide 1</div>
            <div class="subtitle" data-swiper-parallax="-240">Subtitle</div>
            <div class="text" data-swiper-parallax="-360">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet
                    faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
                    Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit
                    facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut
                    libero. Aenean feugiat non eros quis feugiat.</p>
            </div>
        </swiper-slide>
        <swiper-slide>
            <div class="title" data-swiper-parallax="-100">Slide 2</div>
            <div class="subtitle" data-swiper-parallax="-240">Subtitle</div>
            <div class="text" data-swiper-parallax="-360">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet
                    faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
                    Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit
                    facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut
                    libero. Aenean feugiat non eros quis feugiat.</p>
            </div>
        </swiper-slide>
        <swiper-slide>
            <div class="title" data-swiper-parallax="-100">Slide 3</div>
            <div class="subtitle" data-swiper-parallax="-240">Subtitle</div>
            <div class="text" data-swiper-parallax="-360">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet
                    faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
                    Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit
                    facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut
                    libero. Aenean feugiat non eros quis feugiat.</p>
            </div>
        </swiper-slide>
        <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
    </swiper>
</template>

<script>
    export default {
        data() {
            return {
                swiperOption: {
                    speed: 600,
                    parallax: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                }
            }
        }
    }
</script>

<style lang="less" scoped>
  .parallax-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 130%;
    height: 100%;
    background: url("https://mxlogo.com/img/banner2.4fa1a8f3.jpg") no-repeat 100% 100%;
  }

  .swiper {
    width: 100%;
    height: 380px;
    color: #fff;
    .swiper-slide {
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: $white;
      box-sizing: border-box;
      padding: 0 80px;
      background-color: transparent;

      .title {


        font-weight: bold;
      }

      .subtitle {
        margin-bottom: $gap;

      }

      .text {
        max-width: 430px;
        line-height: 1.32;
      }
    }
  }
</style>

    手持拉大图片

    
<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide>
      <div class="swiper-zoom-container">
        <img src="/images/example/4.jpg">
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper-zoom-container">
        <img src="/images/example/7.jpg">
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper-zoom-container">
        <img src="/images/example/8.jpg">
      </div>
    </swiper-slide>
    <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
    data() {
      return {
        swiperOption: {
          zoom: true,
          pagination: {
            el: '.swiper-pagination'
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    }
  }
</script>

    加载后显示图片

    <template>
    <swiper class="swiper" :options="swiperOption">
        <swiper-slide>
            <img data-src="http://mxlogo.com/img/banner1.1ffa7a22.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </swiper-slide>
        <swiper-slide>
            <img data-src="http://mxlogo.com/img/banner1.1ffa7a22.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </swiper-slide>
        <swiper-slide>
            <img data-src="http://mxlogo.com/img/banner1.1ffa7a22.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
    </swiper>
</template>

<script>
    export default {
        data() {
            return {
                swiperOption: {
                    // Enable lazy loading
                    lazy: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                }
            }
        }
    }
</script>

    类似于响应式

    一次性显示多少，图片边距是多少

    <template>
    <swiper class="swiper" :options="swiperOption">
        <swiper-slide>Try</swiper-slide>
        <swiper-slide>resize</swiper-slide>
        <swiper-slide>the</swiper-slide>
        <swiper-slide>browser</swiper-slide>
        <swiper-slide>window</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
        <swiper-slide>Slide 7</swiper-slide>
        <swiper-slide>Slide 8</swiper-slide>
        <swiper-slide>Slide 9</swiper-slide>
        <swiper-slide>Slide 10</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>z

<script>
    export default {
        data() {
            return {
                swiperOption: {
                    slidesPerView: 5,
                    spaceBetween: 50,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    breakpoints: {
                        1024: {
                            slidesPerView: 4,
                            spaceBetween: 40
                        },
                        768: {
                            slidesPerView: 3,
                            spaceBetween: 30
                        },
                        640: {
                            slidesPerView: 2,
                            spaceBetween: 20
                        },
                        320: {
                            slidesPerView: 1,
                            spaceBetween: 10
                        }
                    }
                }
            }
        }
    }
</script>
    vue.js轮播图
    赵不悔
    96 声望4 粉丝

    我以为租来的人生也能幸福…要不是幸福终究有个期限，我也就信了。

    « 上一篇
    flex布局快速上手
    下一篇 »
    批量修改后缀名方法

    引用和评论

    推荐阅读
    头像
    VsCode中插件Prettier使用说明

    赵不悔阅读 1k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.2k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 494评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 892

    0 条评论
    得票最新