zoukankan      html  css  js  c++  java
  • vue中轮播图插件--vue-awesome-swiper

    vue有自己的轮播插件,vue-awesome-swiper,  不用vue的话下载swiper插件,使用vue框架最好用vue自己的轮播插件

    1.  下载     npm install vue-awesome-swiper --save-dev

    2.   main.js中引入css       import 'swiper/dist/css/swiper.css'

    3.   组件中使用

     js:

      import {   swiper,  swiperSlide    }    from   'vue-awesome-swiper';

     components:  {

      swiper,

      swiperSlide

     }

     data ()  {

      return {

        swiperOption:  {

         //  swiper  版本区分了组件和普通版本,所以pagination,autoplay要这样写,否则会导致控制点不显示

         pagination:  {

          el:  '.swiper-pagination'

         },

         autoplay:  {

          delay:  1000

         },

         loop:  true

        }

      }

     }

     

     html:

     <template>

      <div class="container">

       <swiper :options="swiperOption">

        <swiper-slide><img  src="1.jpg"  alt=""></swiper-slide>

        <swiper-slide><img  src="1.jpg"  alt=""></swiper-slide>

        <swiper-slide><img  src="1.jpg"  alt=""></swiper-slide>

        <!--    控制点    ---    不要写错位置,写错位置不出现控制点   -->

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

       </swiper>

      </div>

     </template>

    更为详细

    https://www.cnblogs.com/stephentian/p/8344258.html

  • 相关阅读:
    JAVA_SE基础——47.接口
    抽象类和接口的区别[精华版]
    JAVA_SE基础——46.引用数据类型变量.值交换[独家深入解析]
    JAVA_SE基础——45.基本类型变量.值交换[独家深入解析]
    第一个Spring程序
    三层架构和MVC的区别
    Spring 概述及IOC理论推导
    Mybatis之缓存
    Mybatis之动态SQL
    Mybatis之一对多和多对一处理
  • 原文地址:https://www.cnblogs.com/lgl1209/p/10334322.html
Copyright © 2011-2022 走看看