vue swiper的插件

喜欢ヅ旅行 2022-05-25 13:09 198阅读 0赞

首先我们要用到swiper,所以要安装它，通过npm安装

<table>  安装  
 <tbody> 
  <tr> 
   <td>npm install swiper</td> 
  </tr> 
 </tbody> 
</table>

然后好麻烦直接贴代码了   ↓↓↓

<template>
      <div id="banner">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide"
              v-for="item in lists"><img :src="item.img"></div>
          </div>
          <div class="swiper-pagination"
            @click="left"></div>
          <div class="swiper-button-next"
            @click="next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      </div>
    </template>

<script>
      import Swiper from 'swiper'
      import 'swiper/dist/css/swiper.min.css'
      import 'swiper/dist/js/swiper.min.js'
      export default {
        data() {
          return {
            lists: [],
    
    
          }
        },
        mounted() {
     
          this.$http.get("https://api.myjson.com/bins/17ys0m").then((res) => {
            this.lists = res.data;
            this.swiper = new Swiper('.swiper-container', {
              observer: true,
              preventLinksPropagation : false,
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              }
            });
    
    
          })
        },
        methods: {
     pay () {
     let money = this.lists[this.swiper.activeIndex].money
     console.log(money)
     }
        }
      }
    </script>

<style>
      * {
        margin: 0;
        padding: 0;
      }
      
      #banner {
        width: 100%;
        height: 150px;
      }
      
      .swiper-slide {
        width: 100%;
        height: 150px;
      }
      
      .swiper-slide img {
        width: 100%;
        height: 100%;
      }
    </style>

效果图: 因为我就是为了练练手，所以我并没有写样式，小伙伴可以自己去写，还有js中的一些swiper的其它属性，比如自动播放，切换之类的，请参考官网API文档：[http://www.swiper.com.cn/api/index.html][http_www.swiper.com.cn_api_index.html]

去吧皮卡丘！~~~

![20180515115329408][]

到底了！！！~~~

[http_www.swiper.com.cn_api_index.html]: http://www.swiper.com.cn/api/index.html
[20180515115329408]: /images/20220525/26a79342df5946ff919811e456ac622b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关快速入门在Vue中使用滑动插件Swiper

前言 swiper 开源、免费、强大的滑动插件。 swiper中文网 [https://www.swiper.com.cn/][https_www.swiper

柔情只为你懂/ 2023年10月18日 11:57/ 0 赞/ 54 阅读

相关 vue使用swiper插件修改左右箭头的默认样式

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

古城微笑少年丶/ 2022年11月27日 08:48/ 0 赞/ 411 阅读

相关 Vue中使用swiper插件实现轮播图

最终效果如图: ![20210623143509101.gif][] 为了更稳定不建议使用最新版本swiper 下载指定版本如下图: 用到vue-aweso

爱被打了一巴掌/ 2022年10月09日 02:56/ 0 赞/ 272 阅读

相关使用swiper4轮播插件

[https://www.swiper.com.cn/download/index.html][https_www.swiper.com.cn_download_index.h

蔚落/ 2022年09月02日 05:15/ 0 赞/ 262 阅读

相关 vue swiper的插件

首先我们要用到swiper,所以要安装它，通过npm安装 <table> 安装 <tbody> <tr> <td>npm install swiper<

喜欢ヅ旅行/ 2022年05月25日 13:09/ 0 赞/ 199 阅读

相关 vue 插件(swiper)使用

两种方法: 1... 打开[https://www.swiper.com.cn/download/index.html][https_www.swiper.com.cn_d

本是古典何须时尚/ 2021年11月22日 14:52/ 0 赞/ 399 阅读

相关 vue vue-awesome-swiper轮播插件如何兼容ie9

轮播插件vue-awesome-swiper在ie9中运行的时候没效果解决方法： vue-awesome-swiper在IE9下报错，主要原因是element.clas

﹏ヽ暗。殇╰゛Y/ 2021年11月14日 11:08/ 0 赞/ 422 阅读

相关 vue 轮播图插件vue-awesome-swiper

在做vue项目时，咱们会经常遇到轮播图效果，那么这给大家介绍一个好用的轮播图插件vue-awesome-swiper，首先在github中搜索vue-awesome-swipe

女爷i/ 2021年09月18日 14:58/ 0 赞/ 1106 阅读

相关 vue项目笔记（10）-使用vue插件vue-awesome-swiper

vue插件vue-awesome-swiper的使用方法 vue-awesome-swiper插件用于快速创建轮播图，其中2.6.7版本较为稳定且无bug，我们以此为例，

痛定思痛。/ 2021年09月16日 02:20/ 0 赞/ 567 阅读

相关 swiper 插件使用

Swiper使用方法 1.首先加载插件，需要用到的文件有[swiper.min.js][]和[swiper.min.css][]文件。 <!DOCTYP

素颜马尾好姑娘i/ 2021年09月10日 16:32/ 0 赞/ 563 阅读