vue使用swiper(轮播图)

最新推荐文章于 2024-10-10 17:01:55 发布

看见还不错

最新推荐文章于 2024-10-10 17:01:55 发布

阅读量1.8k

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_61417250/article/details/121951736

版权

众所周知，轮播图现今在网页中占据着必不可少的地位。任何的一个网站，一个网页，都会出现一个轮播图，而轮播图更是利用JavaScript做出的一个比较基础的动画。下面是我本人对写轮播图的一点见解，很多地方可能不是很全面，甚至可能说是错误的，希望大家多多指点

1、swiper轮播图的按照命令

详细可看官网

Swiper使用方法 - Swiper中文网

2、安装命令

3、应用代码

<template>
<div>

 <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
</div>
</template>

<script>

import "swiper/css/swiper.css"
import Swiper from "swiper"

export default {
components: {},
props: {},
data() {
return {

}
},
computed: {},
methods: {

},
created() {
   
},

mounted() {
 new Swiper ('.swiper-container', {
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    autoplay: {
    delay: 1000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

  })        
},
}
</script>
<style scoped lang="less">
    .swiper-container {
    width: 600px;
    height: 300px;
}  
</style>