zoukankan      html  css  js  c++  java
  • 使用swiper制作轮播图

    在Vue中使用swiper可使用vue-awesome-swiper组件

    npm install swiper vue-awesome-swiper --save

    全局注册

    import Vue from 'vue'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
     
    // import style
    import 'swiper/css/swiper.css'
     
    Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

    局部注册

    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
     
    export default {
      components: {
        Swiper,
        SwiperSlide
      },
      directives: {
        swiper: directive
      }
    }

    组件

    <template>
      <swiper ref="mySwiper" :options="swiperOptions">
        <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>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </template>

     我们可以在swiperOptions 中设置轮播图的各种属性

    data(){
          return {
            swiperOption:{
              autoplay:true,
              loop:true,
              effect:'cube',
    cubeEffect: { shadowOffset: 100, shadowScale: 0.6 }, pagination: { el: '.swiper-pagination', clickable:true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } }

     更多的细节可到swiper中文文档查阅

  • 相关阅读:
    Git tag
    Docker学习笔记五 仓库
    Docker学习笔记四 Docker容器
    Docker学习笔记二 使用镜像
    Docker学习笔记一 概念、安装、镜像加速
    element-UI 下拉条数多渲染慢
    scroll-view——小程序横向滚动
    Jquery slider范围滑块,为两个滑块设置不同的setp值
    自说自话2
    自说自话1
  • 原文地址:https://www.cnblogs.com/liunaiming/p/13207467.html
Copyright © 2011-2022 走看看