Vue+Swiper

需要准备的东西:

1.swiper的css和js文件(swiper官网自行下载)

2.cmd中先在文件夹目录下npm install --save swiper

一、把准备好的swiper文件放在的static下。如图:



二、在src文件夹下components文件下建立swiper.vue(名字可以随便起)



在我们刚刚建立的swiper.vue文件中写入信息

template中对应 swiper官网中html,如图(Slide1,Slide2,Slide3换成图片



在script中先把我们准备好的swiper的css和js文件引入进来



然后将他导出,从var mySwiper开始为swiper官网中内容

<script>
    import '../../../static/swiper/swiper-3.4.2.min.css'
    import Swiper from '../../../static/swiper/swiper-3.4.2.min.js';
    export default{
        name:"aaa",
        comments:{Swiper},
        mounted(){
            this.$nextTick(() =>{
                  var mySwiper = new Swiper ('.swiper-container', {
                    // direction: 'vertical',
                    loop: true,
                    autoplay:1000,
                    
                    // 如果需要分页器
                    pagination: '.swiper-pagination',
                    
                    // 如果需要前进后退按钮
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    
                    // 如果需要滚动条
                    // scrollbar: '.swiper-scrollbar',
                    
                    // 以下看个人需要加或者不加
                    autoplayDisableOnInteraction : false,   //触碰,拖动,点击后继续轮播
                    paginationClickable :true,  //关联点
                    
                })  
                // 以下看个人需要加或者不加,效果为鼠标经过轮播停止,划出继续
                $('.swiper-container').mouseover(function(){
                    mySwiper.stopAutoplay();
                })
                $('.swiper-container').mouseout(function(){
                    mySwiper.startAutoplay();
                })
            })
        }
    }
</script>


style中设置scoped(仅用于本页面)和你所需轮播图的大小

<style scoped>
    .swiper-container {
        width: 790px;
        height: 340px;
    }
</style>

在components中建立index.vue(名字随便起)用来展示轮播图

在刚在建立index.vue的文件夹中的script中引入swiper

<script>
    import swiper from "./swiper"
    export default{
        components:{
            swiper
        }
    }
</script>

template中

<template>
  <div id="aaa">
      <swiper/>
  </div>
</template>

三(此部分也可以在Vue项目步骤中查看)

 src文件夹下的App.vue中:

script中:

把他自带的注释掉(或者删掉)

引入刚才我们建立的index.vue文件并导出

template中引用模块

把他id为app中自带的注释掉(或者删掉)

<index/>

<template>
  <div id="app">
    <index/>
  </div>
</template>

<script>
import index from "./components/index"
  export default {
    name: 'app',
    components:{
      index
    }
  }
</script>

src下main.js中把路由链接的两句话注释掉

import routerfrom'./router' 和 new Vue下的router,这两句话需要注释


运行项目就可以看到效果啦











Vue.js 结合 Swiper 是一种常见的组合,用于创建动态且响应式的轮播图组件。Swiper 是一款流行的前端轮播库,它提供了丰富的选项和易用的 API,而 Vue 可以帮助我们管理数据绑定、状态管理和组件复用。 以下是使用 VueSwiper 实现叠层轮播图的基本步骤: 1. **安装 Swiper**: 首先,你需要在项目中引入 Swiper 的库。可以使用 npm 或 yarn 进行安装: ```bash npm install swiper@latest swiper-auto-init --save # 或者 yarn add swiper@latest swiper-auto-init ``` 2. **导入 Swiper 组件**: 在你的 Vue 文件中,导入 Swiper 的 CSS 和 JavaScript,并使用 `v-bind` 将其属性绑定到组件上: ```html <link rel="stylesheet" href="path/to/swiper.min.css"> <script src="path/to/swiper-bundle.min.js"></script> ``` ```js import { Swiper, SwiperSlide } from 'swiper'; ``` 3. **创建模板和数据**: 创建一个包含 Swiper 组件的 Vue 模板,并定义数据数组,存放轮播图片及其内容: ```html <div id="mySwiper"> <swiper :options="swiperOptions"> <swiper-slide v-for="(item, index) in images" :key="index"> <img :src="item.image" alt="Slide {{ index + 1 }}"> <!-- 添加额外内容如标题等 --> <div class="slide-content">{{ item.title }}</div> </swiper-slide> </swiper> </div> ``` ```js data() { return { images: [ // 图片数组,例如 [{'image': 'img1.jpg', 'title': '图1'}, ...] ], swiperOptions: { // Swiper 的配置选项,如 autoplay、pagination 等 }, }; }, ``` 4. **初始化 Swiper**: 在 Vue 的 mounted 生命周期钩子函数里初始化 Swiper 组件,传入数据配置: ```js mounted() { this.$refs.mySwiper.swiper.init(); } ``` 5. **调整样式**:根据需要调整 Swiper 的样式和布局,比如添加 pagination 控制点、改变切换效果等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值