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

  • 相关阅读:
    linux之awk命令
    HDU 2097 Sky数 进制转换
    HDU 2077 汉诺塔IV
    HDU 2094 产生冠军 dfs加map容器
    HDU 2073 叠框
    HDU 2083 简易版之最短距离
    HDU 2063 过山车 二分匹配
    天梯 1014 装箱问题
    天梯 1214 线段覆盖
    天梯 1098 均分纸牌
  • 原文地址:https://www.cnblogs.com/lgl1209/p/10334322.html
Copyright © 2011-2022 走看看