Swiper插件的安装及使用

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量1.9k 收藏 2
点赞数 3
文章标签： 前端 html5 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sjsjjdbj/article/details/128066312
版权

一、Swiper简介

swiper是一款轻量级的轮播图插件，开源、免费、稳定、使用简单且功能强大，由纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果，是架构移动终端网站的重要选择！

二、安装方法

  1. 如图点击下载Swiper；
  2. 如图点击下载压缩文件夹，也可点击下方下载地址进行下载；swiper-4.5.3.zipicon-default.png?t=M85Bhttps://www.swiper.com.cn/download/swiper-4.5.3.zip
  3. 如图点击文件夹中的dist文件夹，找到css文件夹中的swiper.css文件和js文件夹中的swiper.js文件，并将这两个文件复制到自己的项目中；
  4. Swiper中文网链接地址Swiper中文网-轮播图幻灯片js插件,H5页面前端开发icon-default.png?t=M85Bhttps://www.swiper.com.cn/

三、使用方法

  1. 引入文件 
      <link rel="stylesheet" href="css/swiper.css" />
  <script src="js/swiper.js"></script>
  2. HTML部分 
    <div class="swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="img/1.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="img/2.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="img/3.png" alt="">
        </div>
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 导航按钮 -->
      <div class="swiper-button-prev">
        <svg t="1669042346665" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="4658" width="200" height="200">
          <path
            d="M452.266667 507.733333l-29.866667 29.866667 29.866667 29.866667 115.2 115.2 29.866666-29.866667-115.2-115.2L597.333333 422.4l-29.866666-29.866667-115.2 115.2z m81.066666 388.266667c200.533333 0 362.666667-162.133333 362.666667-362.666667S733.866667 170.666667 533.333333 170.666667 170.666667 332.8 170.666667 533.333333 332.8 896 533.333333 896z m0-42.666667C358.4 853.333333 213.333333 708.266667 213.333333 533.333333S358.4 213.333333 533.333333 213.333333 853.333333 358.4 853.333333 533.333333 708.266667 853.333333 533.333333 853.333333z"
            fill="#444444" p-id="4659"></path>
        </svg>
      </div>
      <div class="swiper-button-next">
        <svg t="1669042362801" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="5570" width="200" height="200">
          <path
            d="M614.4 507.733333l29.866667 29.866667-29.866667 29.866667-115.2 115.2-29.866667-34.133334 115.2-115.2L469.333333 422.4l29.866667-29.866667 115.2 115.2zM533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z"
            fill="#444444" p-id="5571"></path>
        </svg>
      </div>

      <!-- 滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
</div>
  3. JS部分 
    <script>
      var mySwiper1 = new Swiper(".swiper-container", {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        loop: true,
        autoplay: true,
        keyboard: true,
        zoom: true,
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true,
        },
      });
</script>
  4. 整体代码 
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="css/swiper.css" />
  <script src="js/swiper.js"></script>
</head>
<body>
  <div class="swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="img/1.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="img/2.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="img/3.png" alt="">
        </div>
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 导航按钮 -->
      <div class="swiper-button-prev">
        <svg t="1669042346665" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="4658" width="200" height="200">
          <path
            d="M452.266667 507.733333l-29.866667 29.866667 29.866667 29.866667 115.2 115.2 29.866666-29.866667-115.2-115.2L597.333333 422.4l-29.866666-29.866667-115.2 115.2z m81.066666 388.266667c200.533333 0 362.666667-162.133333 362.666667-362.666667S733.866667 170.666667 533.333333 170.666667 170.666667 332.8 170.666667 533.333333 332.8 896 533.333333 896z m0-42.666667C358.4 853.333333 213.333333 708.266667 213.333333 533.333333S358.4 213.333333 533.333333 213.333333 853.333333 358.4 853.333333 533.333333 708.266667 853.333333 533.333333 853.333333z"
            fill="#444444" p-id="4659"></path>
        </svg>
      </div>
      <div class="swiper-button-next">
        <svg t="1669042362801" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="5570" width="200" height="200">
          <path
            d="M614.4 507.733333l29.866667 29.866667-29.866667 29.866667-115.2 115.2-29.866667-34.133334 115.2-115.2L469.333333 422.4l29.866667-29.866667 115.2 115.2zM533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z"
            fill="#444444" p-id="5571"></path>
        </svg>
      </div>

      <!-- 滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    <script>
      var mySwiper1 = new Swiper(".swiper-container", {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },//前进后退按钮
        loop: true,//无限循环
        autoplay: true,//自动切换
        keyboard: true,//键盘控制
        zoom: true,//调焦，开启缩放功能
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true,
        },//分页器
      });
    </script>
</body>
</html>

四、效果展示  

 

 

 

 

 

我会做水煮肉
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Swiper的安装及使用
zzzwyZYzzy的博客
07-04 993
现如今Swiper版本已经更新到第八个版本，在Vue2中不建议使用最新的版本，Vue2使用第五个版本相对于来说比较好用当然6-7-8版本也可以，7和8版本主要针对Vue3，所以说在Vue2中5的版本用的比较多。在项目中下载Swiper包：npm i swiper@5。
vue中使用swiper插件
qq_22905801的博客
02-26 61
完整代码：OK今天给大家介绍一下vue2中使用swiper插件，以及在使用中需要的问题，比如说在使用时轮播图失效的情况的解决。由下图可以看到现在swiper已经更新到了8版本了，但是需要注意的是5以上的版本是为了vue3服务的，使用时多多少少会有谢问题。如果感兴趣的话可以看看官网的介绍swiper中文官网。这里我先给出官网介绍的使用步骤，但是它是在html中使用的并且在vue2中使用也有点问题初始化：这里需要说明的是我这里是将轮播图组件Carousle单独抽离出来封装的。
Uniapp swiper插件实现轮播图和轮播消息
foreverKOOKV95的博客
05-01 1299
【代码】Uniapp swiper插件实现轮播图和轮播消息。
Swiper插件 下载及使用教程
Lsiyi_的博客
07-12 6770
Swiper插件 下载及使用教程
swiper插件如何使用？
qq_57193827的博客
07-29 3618
js中swiper插件的使用
swiper插件的使用方法
weixin_61665636的博客
11-17 4589
1.swiper的介绍 2.为什么使用swiper 3.Swiper的使用方法 4. Swiper Animate的使用方法 5.在常用框架中使用Swiper
swiper插件的使用
quanmeiren的博客
04-14 718
6.这是CSS的页面。注意swiper插件层级很高。如果有头部样式的话，一定要在头部哪里加。3.在自己创建的HTML中先写个banner的地方。7.这是复制官网下来的JS放到自己的JS里面。4.然后看官网的教程跟着复制。2.下载最新的第一个文件。5.这是HTML的页面。
vue项目中使用swiper插件
Darling_DL的博客
05-16 968
【代码】vue项目中使用swiper插件。
react 中使用swiper插件
m0_60676278的博客
01-04 938
【代码】react 中使用swiper插件。
使用Swiper插件
m0_51645333的博客
01-31 219
Swiper插件使用步骤
swiper插件及使用方法
09-18
本篇文章将详细介绍Swiper插件及其使用方法，包括如何通过jQuery的AJAX动态获取图片并集成到Swiper中。 首先，我们需要了解Swiper的基本结构。Swiper由一系列可滑动的容器（slide）组成，这些容器可以是图片、文本...
vue引入swiper插件的使用实例
08-29
以下是一个详细的步骤指南，教你如何在Vue应用中集成并使用Swiper插件。 **步骤一：安装Vue** 首先确保已安装Node.js环境，然后通过npm安装Vue CLI。在终端执行以下命令： ```bash npm install vue ``` **步骤二：...
swiper插件使用
03-31
Swiper插件是一款广泛应用于移动端的轮播图组件，它以其高效、易用和功能强大而受到开发者的青睐。在本文中，我们将深入探讨Swiper的基本使用方法，并结合`index.html`、`js`和`css`等文件，了解如何在实际项目中...
解决vue中使用swiper插件问题及swiper在vue中的用法
01-21
Swiper简介 Swiper常用于移动端网站的内容触摸...解决vue中使用swiper插件，在引入swiper插件后，发现无法正常运行问题 这次我们模拟从后台取下数据，然后数据绑定在swiper标签中。 <abc></abc> <div id=banner>
swiper插件
01-24
Swiper 3.4.1是该插件的一个版本，下面将详细介绍其主要特性和使用方法。 1. **触摸滑动事件支持**：Swiper最引人注目的特性之一就是支持触摸设备的滑动操作。在智能手机和平板电脑上，用户可以通过手指滑动来浏览...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 816
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 445
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 1009
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
swiper插件使用方法
08-18
Swiper 是一个流行的移动端滑动插件，可以用于创建漂亮的轮播图、滑动导航等交互效果。以下是 Swiper 插件的基本使用方法： 1. 引入 Swiper 库：在 HTML 文件中引入 Swiper 的 CSS 和 JavaScript 文件。你可以下载 Swiper 的源代码或使用 CDN 引入。 ```html <link rel="stylesheet" href="path/to/swiper.min.css"> <script src="path/to/swiper.min.js"></script> ``` 2. 创建 Swiper 容器：在 HTML 文件中创建一个容器元素，用于显示滑动内容。 ```html <div class="swiper-container"> <div class="swiper-wrapper">
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值