swipe的基础使用（二十三）

最新推荐文章于 2025-02-27 20:04:11 发布
原创 最新推荐文章于 2025-02-27 20:04:11 发布 · 2.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #web前端 #框架 #移动 #swiper

这篇博客详细介绍了如何利用Swiper框架在HTML5 web前端项目中创建带有缩略图导航的滑动效果。通过设置两个swiper页面的外部容器类名，并将缩略图页面作为底部导航，实现了将原始的圆点导航替换为图片。调整CSS样式以适应缩略图的大小，完成个性化定制。

本次内容我们介绍用swiper实现缩略图的效果。

首先搭建起俩个swiper页面，注意俩个swiper页面的外部容器当中的类名。


<div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1</div>
                <div class="swiper-slide" style="background-image:url(img/4.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/5.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/6.jpg)"></div>
            </div>
        </div>

这个swiper页面为展示出的图片，也就是没有缩放过的图片。


然后开始写缩略图的swiper页面，可以把这个缩略图页面当做底部导航来使用，只不过原来的圆点变成了图片。

<div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1</div>
最低0.47元/天 解锁文章
uni-app小程序基础知识速览（上）
可可的博客
10-23 681
微信小程序开发文档相当于div image button input v-if-else dom元素不显示的显示与隐藏 swiper 文本长按 富文本 for循环 总结 底部导航配置 ui练习 发起get请求 二、路由跳转 1.声明式导航 后退 2.编程式导航 获取路由传递数据 三、下拉刷新 配置 四、上拉分页处理 配置文件 ts文件 获取颜色 ui页面 外部使用wxs方式 ui引入并且重新命名 七、上传图片、预览图片 ui 条件注释实现跨段兼容创建模板控制样式是否可以被外部使用以及使
vue-awesome-swiper 实现轮播图和缩略图联动
wx优快云1997的博客
01-17 7574
最近有一个（VUE）需求实现如下： 可以通过左右箭头按钮实现轮播图，轮播图切换时，下方的缩略图也要对应显示，并且缩略图是可以滚动的（比方说一共有八张图片，但是缩略图展示时一次只能展示五张）。同时点击缩略图时，轮播图也要对应显示。 下面是已完成的效果图。 要完成此需求首先去查了很多插件。像elementui实现轮播图都很方便，但是不符合我这该死的需求。 索性找到了这个插件，还有一些大佬的文档，解决坑的文档。列在下面。 vue-awesome-swiper | Homepage | Surmon.
swiper使用
weixin_44901028的博客
04-04 937
Swiper 的基础使用方法和常用配置项。在实际项目中，还可以根据需要进行更多的自定义修改和调整。如果您想了解更多关于 Swiper 的具体用法，请参考官方文档或者相关教程。
swiper的使用
weixin_34405557的博客
04-17 167
swipe是一款轮播图插件，我是用在vue里面，方便省事儿。swipe里面有很多关于滑动的组建，我只用过轮播图，如果以后有时间，可以再看看官网上别的组件介绍。官网地址 github地址 安装： npm install vue-swipe 安装完成之后，我没有在main.js中注册它，而是在使用页面注册的。因为通常来说轮播图只会在一个应用的...
swipe的基础使用（二十四）
never__ends的博客
07-15 1578
本次内容我们介绍swiper当中的散列导航。 我们按照惯例先搭建swiper的基础页面。 <a href="http://www.h5edu.cn/usercode/a54111bbe7ec5fb7ebd9accb9ca140f1ef23eadb/#slide3"
MathQ 开源项目教程
gitblog_01168的博客
08-28 455
MathQ 开源项目教程 1. 项目的目录结构及介绍 mathQ/ ├── docs/ │ ├── README.md │ └── CONTRIBUTING.md ├── src/ │ ├── main/ │ │ ├── App.js │ │ └── index.js │ ├── config/ │ │ ├── default.json │ │ └─...
Cardboard 开源项目使用教程
gitblog_00421的博客
08-31 302
Cardboard 开源项目使用教程 1. 项目的目录结构及介绍 cardboard/ ├── README.md ├── LICENSE ├── src/ │ ├── main.cpp │ ├── config.h │ ├── utils/ │ │ ├── logger.cpp │ │ └── logger.h │ └── modules/ │ ├──...
二、使用poco进行airtest测试
x_xingduo_2315的博客
03-21 5091
一poco安装 poco是网易自研的无需嵌入sdk。使用poco可以向appuim、selenium一样定位app上的元素对象位置。 poco安装有两种方式，第一种是直接网上搜索poco依赖包下载，然后使用python进行解压安装，这里不做介绍。另外一种是直接使用pip安装。 在命令行中使用指令：pip install pocoui进行安装。 等待安装完后使用pip list命令查看是否安装成功，如下，pip list指令下显示有pocoui了，版本是目前的最新版本。 二poco的使用 ..
iPhone开发基础教程（第8、12章）
10-26
第十二章主要讲述网络编程，这对于需要从服务器获取数据或实现云同步的应用至关重要。本章将介绍如何使用URLSession进行HTTP请求，处理JSON和XML数据，以及使用Alamofire等第三方库简化网络请求。此外，还会讲解iOS...
python基础知识
DaenerysTargaryen的博客
09-11 4306
1.学习入门链接https://www.cnblogs.com/wangxiaoqun/p/6924797.html
swiper缩略图轮播
2401_83127745的博客
06-01 298
使用vue3+ts完成swiper缩略图的效果，起初以为这个swiper是一个组件就可以完成，但现实是两个swiper做了属性互调，官网上没有描述清楚缩略图是否可以轮播，导致走了很多弯路（获取上图的实例然后操作swiper使其完成走马灯的效果）2.在main.ts中引入他的css文件。3.在你所需的页面中引入。注：自己写的自动轮播效果。
swiper双向控制
山河野
10-28 1999
实现swiper双向控制 html部分 js部分 var galleryThumbs = new Swiper(’.gallery-thumbs’, { observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper // freeMode: true, // watchS...
swiper缩略图报错，动态获取图片加载失败
Call_me_small_pure的博客
10-22 1599
swiper缩略图展示的时候必须要保证全部dom挂在完毕，$nextTick就是保证在所有图片加载完毕之后执行的函数 当swiper需要展示的图片数量小于3个时，就会出现各种奇妙的错误，为解决这个问题需要在初始化swiper的时候加上watchOverflow: true，同时官网文档要求loop：false；虽然loop为false，但是仅限于图片数量小于3的时候，当&amp;gt;=3的时候 实现的...
JavaScript Swiper 插件的使用教程：打造流畅的滑动效果
最新发布
m0_62599305的博客
02-27 2592
Swiper支持触摸滑动：适用于移动端设备，支持触摸和滑动手势。响应式设计：自动适应不同设备的屏幕尺寸，灵活显示内容。丰富的配置选项：提供多种自定义选项，如自动播放、分页、导航按钮等。性能优化：滑动流畅，即使在大量图片或内容的情况下也能保持良好的性能。Swiper 适用于创建幻灯片、横向滚动、图片滑动、内容展示等各种滑动效果。Swiper 插件是实现滑动效果和响应式设计的最佳选择之一，凭借其强大的功能和灵活的配置选项，它可以适应各种不同的需求。
Vue框架使用swiper5实现带缩略图的轮播图
weixin_49600762的博客
12-20 5048
我这里用的是 "swiper": "5.4.5"和"vue-awesome-swiper": "^3.1.3"，很多人在这就会有疑问，这两版本不对应啊，不急，这就是我发这文章的意义，一是记录一下自己的坑，二是同道中人参考。我为啥不装对应的包呢，因为我这个项目前面写的人已经装了这个了，我不能改呀，改了别人的就会出错了。首先看效果图先，毕竟需求都是不一样的嘛，我发这个文章主要是看了一些网页上的好多都存在缩略图那里的高亮居中问题，所以本文章主要就是实现当前图片看到的一些效果。
swiper使用教程
热门推荐
q1054007919的博客
03-31 1万+
第一步：点击获取swiper，点击下载Swiper，下载需要版本的swiper压缩包 第二部：在html页面使用，需要将下载文件里的css，min.css以及js,min.js放到自己的文件夹下 自己的文件 html的代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont
swiper缩放图
nice66660的博客
08-23 1467
/上面的图 var shang = new Swiper("#shang", { navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, loop:true, //监听 thumbs: { swiper:xia, }需要把自己的图片插入相应位置（上图我已经插入了六个演示图片)，在swiper-slide里面，格式可以在swiper官网粘贴。因为是缩略图，所以上面有图片（大图），下面也有图片（小图）
vue-swiper多图片，缩略图双向控制
Mr_Black_Rabbit的博客
09-26 1217
vue-awesome-swiper: 4.1.1 swiper: 5.4.5 效果图: 代码: <template> <div class="box"> <div class="swiper-box"> <!-- swiper1 --> <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop"> .
swiper的基本使用
qq_63533863的博客
02-24 2836
1.引入响应的jS|CSS包 2.页面中的结构务必要有 3.new Swiper实例【轮播图中添加动态效果】 ---ListContainer组件开发的重点 1.安装swiper插件：@5 npm install --save swiper@5 2.引入包和样式 import Swiper from "swiper"; import "swiper/css/swiper.css"; 3.页面结构 <div ...
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值