• vue-awesome-swiper 的安装和使用


    vue-awesome-swiper 的安装和使用

    安装:最好用:cnpm install vue-awesome-swiper --save。用npm太慢会卡死。

    引用:

     /*全局引入*/
        import VueAwesomeSwiper from 'vue-awesome-swiper'
        import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
        Vue.use(VueAwesomeSwiper, /* { default global options } */)
      /*组件方式引用*/
        import 'swiper/dist/css/swiper.css'////这里注意具体看使用的版本是否需要引入样式,以及具体位置。
        import { swiper, swiperSlide } from 'vue-awesome-swiper'
        export default {
        components: {
          swiper,
          swiperSlide
        }
     <swiper :options="swiperOption">
          <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
          <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
          <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
          <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
          <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
          <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
        </swiper>
        <!--以下看需要添加-->
        <div class="swiper-scrollbar"></div> //滚动条
        <div class="swiper-button-next"></div> //下一项
        <div class="swiper-button-prev"></div> //上一项
        <div class="swiper-pagination"></div> //标页码
     data() {
        return {
          swiperOption: {
            notNextTick: true,
            autoplay: true,
            speed: 1000,
            loop: true
          },
        };
      },
     components: {   //
        swiper,
        swiperSlide
      },

    我个人自己使用的方法:

    0.1、使用的是yarn 的方式安装插件:

    0.2、在需要使用的组件中引入

    0.3、结构设置,

     0.4、配置项设置1

    0.5、配置项设置2

    1、路在何方? 路在脚下 2、何去何从? 每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
  • 相关阅读:
    gitlab第一次提交
    Command 'cnpm' not found解决方法
    ubuntu18.04安装sublime
    django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE, but settings are not configured.
    django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module: No module named 'MySQLdb'. Did you install mysqlclient or MySQL-python?
    ubuntu18.04安装MySQL
    ubuntu18.04彻底卸载mysql
    rabbitmq高可用
    ASP.NET Global.asax详解
    如何真正提高ASP.NET网站的性能
  • 原文地址:https://www.cnblogs.com/yuanjili666/p/11510579.html
Copyright © 2020-2023  润新知