vue3使用swiper实现轮播图_vue3项目中使用swiper插件轮播图片-程序员宅基地

技术标签： scss  前端  vue.js  npm  javascript  

1.安装插件

安装插件vue-awesome-swiper

npm i swiper vue-awesome-swiper

安装插件swiper

npm i swiper@5
查看package.json  这样就是安装完成

2.代码使用

2.1新建swiper组件  swiper.vue
<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in imgs" :key="index">
        <img :src="item.pic" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <!-- <div class="swiper-button-prev custom-prev"></div>
    <div class="swiper-button-next custom-next"></div> -->
  </div>
</template>
<script setup>
import { reactive, onMounted } from "vue";
import Swiper from "swiper"; // 引入库
import "swiper/css/swiper.css"; // 引入样式文件 注意5和6版本的样式文件不一致
const imgs = reactive([
  { pic: require("@/assets/img/index-banner-01.jpeg") },
  { pic: require("@/assets/img/index-banner-03.jpg") },
]);
onMounted(() => {
  const mySwiper = new Swiper(".swiper-container", {
    loop: true, // 循环模式选项
    autoplay: true, //自动滚动
    effect: "fade", //渐变切换
    autoplay: {
      delay: 3000, //3秒切换一次
      pauseOnMouseEnter: true, //鼠标移入 轮播暂停
    },
    pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
    // navigation: {
    //   nextEl: '.swiper-button-next',
    //   prevEl: '.swiper-button-prev',
    // }
  });
});
</script>
<style lang="scss">
.swiper-container {
  width: 100%;
  //   height: 300px;
  .swiper-slide {
    width: 100% !important;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
Error: Can‘t resolve ‘swiper/css/swiper.css‘ 如何解决

解决方案： 在引入的文件中将其改为：import 'swiper/swiper-bundle.css'

2.2在你要使用的地方引入
<template>
  <div class="common-layout">
      <swiperCom />
    </div>
</template>

<script setup>
    import swiperCom from '@/components/swiper.vue';
</script>

<style lang="scss">
 
</style>

3.swiper的参数

  • slidesPerView：每次显示几个轮播图
  • spaceBetween：每个轮播图之间的间距（单位：px）
  • loop：是否循环滚动
  • centeredSlides：是否居中对齐（true:居中，false：左对齐），默认 false 左对齐，
  • autoplay：是否自动播放
  • navigation：是否左右切换箭头
  • pagination：分页配置
    • clickable：在点击分页圆点的时候，是否进行切换
  • scrollbar：显示滚动条
    • draggable：滚动条可拖动
  • autoplay：切换图片的频率（毫秒为单位）
    • delay：切换的时间（单位：毫秒ms）
    • disableOnInteraction：滑动图片后不禁用自动播放 delay: 2500, disableOnInteraction: false,

其他参数详情请参考官方 API  https://swiperjs.com/swiper-apiicon-default.png?t=N7T8https://swiperjs.com/swiper-api 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60899185/article/details/136901695

智能推荐

海康威视网络摄像头开发流程（五）------- 直播页面测试_ezuikit 测试的url-程序员宅基地

文章浏览阅读3.8k次。1、将下载好的萤石js插件，添加到SoringBoot项目中。位置可参考下图所示。（容易出错的地方，在将js插件在html页面引入时，发生路径错误的问题）所以如果对页面中引入js的路径不清楚，可参考下图所示存放路径。2、将ezuikit.js引入到demo-live.html中。（可直接将如下代码复制到你创建的html页面中）<!DOCTYPE html><html lan..._ezuikit 测试的url

如何确定组态王与多动能RTU的通信方式_组态王ua-程序员宅基地

文章浏览阅读322次。第二步，在弹出的对话框选择，设备驱动—>PLC—>莫迪康—>ModbusRTU—>COM,根据配置软件选择的协议选期期，这里以此为例，然后点击“下一步”。第四步，把使用虚拟串口打勾(GPRS设备)，根据需要选择要生成虚拟口，这里以选择KVCOM1为例，然后点击“下一步”设备ID即Modbus地址(1-255) 使用DTU时，为下485接口上的设备地址。第六步，Modbus的从机地址，与配置软件相同，这里以1为例，点击“下一步“第五步，Modbus的从机地址，与配置软件相同，这里以1为例，点击“下一步“_组态王ua

npm超详细安装（包括配置环境变量）！！！npm安装教程(node.js安装教程)_npm安装配置-程序员宅基地

文章浏览阅读9.4k次，点赞22次，收藏19次。安装npm相当于安装node.js,Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西_npm安装配置

火车头采集器AI伪原创【php源码】-程序员宅基地

文章浏览阅读748次，点赞21次，收藏26次。大家好，小编来为大家解答以下问题，python基础训练100题，python入门100例题，现在让我们一起来看看吧！宝子们还在新手村练级的时候，不单要吸入基础知识，夯实自己的理论基础，还要去实际操作练练手啊！由于文章篇幅限制，不可能将100道题全部呈现在此除了这些，下面还有我整理好的基础入门学习资料，视频和讲解文案都很齐全，用来入门绝对靠谱，需要的自提。保证100%免费这不，贴心的我爆肝给大家整理了这份今天给大家分享100道Python练习题。大家一定要给我三连啊~

Linux Ubuntu 安装 Sublime Text (无法使用 wget 命令，使用安装包下载)_ubuntu 安装sumlime text打不开-程序员宅基地

文章浏览阅读1k次。 为了在 Linux （ Ubuntu） 上安装sublime，一般大家都会选择常见的教程或是 sublime 官网教程，然而在国内这种方法可能失效。为此，需要用安装包安装。以下就是使用官网安装包安装的教程。打开 sublime 官网后，点击右上角 download， 或是直接访问点击打开链接，即可看到各个平台上的安装包。选择 Linux 64 位版并下载。下载后，打开终端，进入安装..._ubuntu 安装sumlime text打不开

CrossOver for Mac 2024无需安装 Windows 即可以在 Mac 上运行游戏 Mac运行exe程序和游戏 CrossOver虚拟机 crossover运行免安装游戏包-程序员宅基地

文章浏览阅读563次，点赞13次，收藏6次。CrossOver24是一款类虚拟机软件，专为macOS和Linux用户设计。它的核心技术是Wine，这是一种在Linux和macOS等非Windows操作系统上运行Windows应用程序的开源软件。通过CrossOver24，用户可以在不购买Windows授权或使用传统虚拟机的情况下，直接在Mac或Linux系统上运行Windows软件和游戏。该软件还提供了丰富的功能，如自动配置、无缝集成和实时传输等，以实现高效的跨平台操作体验。

随便推点

一个用聊天的方式让ChatGPT写的线程安全的环形List_为什么gpt一写list就卡-程序员宅基地

文章浏览阅读1.7k次。一个用聊天的方式让ChatGPT帮我写的线程安全的环形List_为什么gpt一写list就卡

Tomcat自带的设置编码Filter-程序员宅基地

文章浏览阅读336次。我们在前面的文章里曾写过Web应用中乱码产生的原因和处理方式，旧文回顾：深度揭秘乱码问题背后的原因及解决方式其中我们提到可以通过Filter的方式来设置请求和响应的encoding，来解..._filterconfig selectencoding

javascript中encodeURI和decodeURI方法使用介绍_js encodeur decodeurl-程序员宅基地

文章浏览阅读651次。转自：http://www.jb51.net/article/36480.htmencodeURI和decodeURI是成对来使用的，因为浏览器的地址栏有中文字符的话，可以会出现不可预期的错误，所以可以encodeURI把非英文字符转化为英文编码，decodeURI可以用来把字符还原回来_js encodeur decodeurl

Android开发——打包apk遇到The destination folder does not exist or is not writeable-程序员宅基地

文章浏览阅读1.9w次，点赞6次，收藏3次。前言在日常的Android开发当中，我们肯定要打包apk。但是今天我打包的时候遇到一个很奇怪的问题Android The destination folder does not exist or is not writeable，大意是目标文件夹不存在或不可写。出现问题的原因以及解决办法上面有说报错的中文大意是：目标文件夹不存在或不可写。其实问题就在我们的打包界面当中图中标红的Desti..._the destination folder does not exist or is not writeable

Eclipse配置高大上环境-程序员宅基地

文章浏览阅读94次。一、配置代码编辑区的样式 <1>打开Eclipse，Help —> Install NewSoftware，界面如下： <2>点击add...，按下图所示操作： name：随意填写，Location：http://eclipse-color-th..._ecplise高大上设置

Linux安装MySQL-5.6.24-1.linux_glibc2.5.x86_64.rpm-bundle.tar_linux mysql 安装 mysql-5.6.24-1.linux_glibc2.5.x86_6-程序员宅基地

文章浏览阅读2.8k次。一，下载mysql:http://dev.mysql.com/downloads/mysql/； 打开页面之后，在Select Platform:下选择linux Generic，如果没有出现Linux的选项，请换一个浏览器试试。我用的谷歌版本不可以，换一个别的浏览器就行了，如果还是不行，需要换一个翻墙的浏览器。 二，下载完后解压缩并放到安装文件夹下： 1、MySQL-client-5.6.2_linux mysql 安装 mysql-5.6.24-1.linux_glibc2.5.x86_64.rpm-bundle

推荐文章

热门文章

相关标签