vue框架中使用swiper，模块化的方式

落日映苍穹つ 2022-02-17 04:50 359阅读 0赞

一、安装swiper

在项目目录项用npm安装swiper包（模块）

npm   i  swiper

二、引入swiper

在需要swiper的组件里（如：demo.vue）引入swiper

import Swiper from "swiper";

三、使用swiper（demo.vue）

<template>  
  <div class="swiper-container">  
    <div class="swiper-wrapper">  
      <div class="swiper-slide">  
        <img src="../../static/img/img1.jpg" alt="">  
      </div>  
      <div class="swiper-slide">  
        <img src="../../static/img/2.jpg" alt="">  
      </div>  
      <div class="swiper-slide">  
        <img src="../../static/img/3.jpg" alt="">  
      </div>  
      <div class="swiper-slide">  
        <img src="../../static/img/4.jpg" alt="">  
      </div>  
    </div>  
  </div>   
</template>

<script>

import Swiper from "swiper";

export default\{  
    name:"slider",  
    data()\{  
        return\{  
              
        \}  
    \},  
    mounted()\{  
        var mySwiper = new Swiper('.swiper-container', \{  
          autoplay:true,  
          loop:true  
        \})  
    \}  
\}  
</script>

<style scoped>

</style>

发表评论取消回复

表情：

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

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

相关阅读

相关 VUE框架模块化开发和实现原理解析------VUE框架

> <template> > <img alt="Vue logo" src="./assets/logo.png"> > <!-- <Hell

一时失言乱红尘/ 2024年02月26日 06:19/ 0 赞/ 68 阅读

相关 vue项目中swiper组件的使用

一、需求问题在vue的移动端项目中，我们可能需要用到各种各样的触摸滑动场景。swiper是一个非常好用的触摸滑动组件，在vue的移动端项目应用的也是比较多的。二、需求分

不念不忘少年蓝@/ 2023年06月24日 04:56/ 0 赞/ 43 阅读

相关 vue模块化

vue模块化故心故心故心故心小故冲啊 -------------------- 文章目录 vue模块化定义模块的优点 Comm

你的名字/ 2022年12月29日 01:47/ 0 赞/ 207 阅读

相关 vue使用swiper

文章引用[vue使用swiper][vue_swiper] 这次记录主要是记录swiper6的使用，网上多是以前的版本，但是好像vue3可以直接使用swiper6，不需

待我称王封你为后i/ 2022年11月04日 01:36/ 0 赞/ 254 阅读

相关 vue中 swiper

安装： > npm install vue-awesome-swiper@3 --save-dev main.js > import VueAwesomeSwiper f

水深无声/ 2022年09月09日 09:24/ 0 赞/ 219 阅读

相关 Vue 中使用vue-awesome-swiper

官方在线demo：[https://github.surmon.me/vue-awesome-swiper/][https_github.surmon.me_vue-aweso

﹏ヽ暗。殇╰゛Y/ 2022年09月04日 04:46/ 0 赞/ 558 阅读

相关 vue框架中使用swiper，模块化的方式

一、安装swiper 在项目目录项用npm安装swiper包（模块） npm i swiper 二、引入swiper

落日映苍穹つ/ 2022年02月17日 04:50/ 0 赞/ 360 阅读

相关 vue项目中使用swiper框架

第一步：安装swiper 在项目目录下打开命令窗口输入命令:npm install swiper 第二步：引入js文件 ![在这里插入图片描述][watermark_

超、凢脫俗/ 2022年02月13日 09:49/ 0 赞/ 292 阅读

相关 vue中store模块化

![606260-20190724151938447-1765205827.png][] ![606260-20190724152102869-1839534279.png]

Dear 丶/ 2021年11月22日 05:28/ 0 赞/ 336 阅读

相关 Vue - Vue 中 vue-awesome-swiper 轮播组件的使用

vue-swiper轮播组件使用一. vue-awesome-swiper官网 [https://www.npmjs.com/package/vue-awesom

水深无声/ 2021年07月25日 23:49/ 0 赞/ 1578 阅读