vue swiper的插件

最新推荐文章于 2024-12-19 17:19:21 发布

原创最新推荐文章于 2024-12-19 17:19:21 发布 · 727 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#轮播 #vue轮播 #vue swiper

Vue.js 专栏收录该内容

50 篇文章

订阅专栏

本文介绍如何利用Swiper库在Vue项目中创建轮播图效果，包括安装配置Swiper、编写Vue组件代码及从远程API获取图片数据。

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

安装
npm install swiper

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

<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

去吧皮卡丘！~~~

到底了！！！~~~