swipe的基础使用（二十三）

最新推荐文章于 2024-08-31 07:52:57 发布
最新推荐文章于 2024-08-31 07:52:57 发布
阅读量2.7k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： swiper介绍 文章标签： html5 web前端 框架 移动 swiper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/never__ends/article/details/51888838
这篇博客详细介绍了如何利用Swiper框架在HTML5 web前端项目中创建带有缩略图导航的滑动效果。通过设置两个swiper页面的外部容器类名，并将缩略图页面作为底部导航，实现了将原始的圆点导航替换为图片。调整CSS样式以适应缩略图的大小，完成个性化定制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本次内容我们介绍用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元/天 解锁文章

200万优质内容无限畅学
uni-app小程序基础知识速览（上）
可可的博客
10-23 641
微信小程序开发文档相当于div image button input v-if-else dom元素不显示的显示与隐藏 swiper 文本长按 富文本 for循环 总结 底部导航配置 ui练习 发起get请求 二、路由跳转 1.声明式导航 后退 2.编程式导航 获取路由传递数据 三、下拉刷新 配置 四、上拉分页处理 配置文件 ts文件 获取颜色 ui页面 外部使用wxs方式 ui引入并且重新命名 七、上传图片、预览图片 ui 条件注释实现跨段兼容创建模板控制样式是否可以被外部使用以及使
React Native学习资源汇总
xiangzhihong8的专栏
08-01 2557
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
swiper使用
weixin_44901028的博客
04-04 850
Swiper 的基础使用方法和常用配置项。在实际项目中，还可以根据需要进行更多的自定义修改和调整。如果您想了解更多关于 Swiper 的具体用法，请参考官方文档或者相关教程。
swiper的使用
weixin_34405557的博客
04-17 152
swipe是一款轮播图插件，我是用在vue里面，方便省事儿。swipe里面有很多关于滑动的组建，我只用过轮播图，如果以后有时间，可以再看看官网上别的组件介绍。官网地址 github地址 安装： npm install vue-swipe 安装完成之后，我没有在main.js中注册它，而是在使用页面注册的。因为通常来说轮播图只会在一个应用的...
swipe的基础使用（二十四）
never__ends的博客
07-15 1554
本次内容我们介绍swiper当中的散列导航。 我们按照惯例先搭建swiper的基础页面。 <a href="http://www.h5edu.cn/usercode/a54111bbe7ec5fb7ebd9accb9ca140f1ef23eadb/#slide3"
Cardboard 开源项目使用教程
最新发布
gitblog_00421的博客
08-31 271
Cardboard 开源项目使用教程 1. 项目的目录结构及介绍 cardboard/ ├── README.md ├── LICENSE ├── src/ │ ├── main.cpp │ ├── config.h │ ├── utils/ │ │ ├── logger.cpp │ │ └── logger.h │ └── modules/ │ ├──...
MathQ 开源项目教程
gitblog_01168的博客
08-28 428
MathQ 开源项目教程 1. 项目的目录结构及介绍 mathQ/ ├── docs/ │ ├── README.md │ └── CONTRIBUTING.md ├── src/ │ ├── main/ │ │ ├── App.js │ │ └── index.js │ ├── config/ │ │ ├── default.json │ │ └─...
python基础知识
DaenerysTargaryen的博客
09-11 4152
1.学习入门链接https://www.cnblogs.com/wangxiaoqun/p/6924797.html
iPhone开发基础教程（第8、12章）
10-26
第十二章主要讲述网络编程，这对于需要从服务器获取数据或实现云同步的应用至关重要。本章将介绍如何使用URLSession进行HTTP请求，处理JSON和XML数据，以及使用Alamofire等第三方库简化网络请求。此外，还会讲解iOS...
swiper缩略图轮播
2401_83127745的博客
06-01 268
使用vue3+ts完成swiper缩略图的效果，起初以为这个swiper是一个组件就可以完成，但现实是两个swiper做了属性互调，官网上没有描述清楚缩略图是否可以轮播，导致走了很多弯路（获取上图的实例然后操作swiper使其完成走马灯的效果）2.在main.ts中引入他的css文件。3.在你所需的页面中引入。注：自己写的自动轮播效果。
swiper双向控制
山河野
10-28 1976
实现swiper双向控制 html部分 js部分 var galleryThumbs = new Swiper(’.gallery-thumbs’, { observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper // freeMode: true, // watchS...
Vue框架使用swiper5实现带缩略图的轮播图
weixin_49600762的博客
12-20 4943
我这里用的是 "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 1401
/上面的图 var shang = new Swiper("#shang", { navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, loop:true, //监听 thumbs: { swiper:xia, }需要把自己的图片插入相应位置（上图我已经插入了六个演示图片)，在swiper-slide里面，格式可以在swiper官网粘贴。因为是缩略图，所以上面有图片（大图），下面也有图片（小图）
Nuxt框架下引入Swiper完成带缩略图照片轮播的黑科技
菜鸟小筑
07-04 1521
笔者的吐槽（可以略过_(:з」∠)_）：最近有个项目是基于Nuxt框架，新需求需要新增加一块照片轮播的功能，笔者小白之前用过Swiper插件，感觉还比较好用，一般简单的效果都能实现，于是，按某站点的攻略，开始安装Swiper（npm install swiper)，然后按照文章里基于vue的开发，笔者开始照猫画鼠的try try try之路（用swiper6-发现6只能在vue3以上使用，而nuxt中包含的vue版本是2.x；用 ...
原生JS，html,css 一个页面使用多个swiper轮播图，以及swiper轮播图单轮播，多重轮播 源码demo，以及叠加显示隐藏切换问题，多轮播嵌套鼠标悬停等问题，循环播放无停顿设置
weixin_45502613的博客
04-23 1342
如果你想使用轮播图请先去swiper官网查看实例看是否有你需要的swiper官网 由于下面内容过长先给大家讲几种swiperd 功能 （1）swiper循环播放且无停顿 功能 css #thumbs5 .swiper-wrapper,{ -webkit-transition-timing-function: linear !important; /*之前是ease-out*/ -m...
swiper 前后空白 问题求大神指点
张于晏的博客
10-31 2358
实例化后左端有大块空白不是很清楚为什么，引了Boostrap，所以上完整代码求大神指点 ，学识浅薄欢迎大家指点 css~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ /*equipment_state_wrapper*/ .equipment_state_wrapper { padding: 10p...
页面加载多个Swiper使用时，Swiper之间互相影响的解决方法（利用数组和索引）
陈先生的博客
09-02 4934
正常使用swiper的缩略图的js代码如下图所示。 <script> var galleryThumbs = new Swiper('.block .swiper-container', { spaceBetween: 10, slidesPerView: 4, freeMode: true, watchSlidesVisibility: true, watchSlidesProgress: true
swipe.js文档及用法
bangxionger9224的博客
06-14 341
最近的一个项目中使用到了swipe.js这个插件 感觉非常的好用的 官方网站 http://swipejs.com/ https://github.com/bradbirdsall/Swipe 简介 swipe.js是一个轻量级的移动滑动组件，支持触摸移动，支持响应式页面。 下面是从GitHub上翻译的用法和文档 用法 Swipe只需添加很简单的一段代码即可，...
Durfee刷卡应用开发教程：AngularJS与常用工具介绍
在 durfee-swipe 项目中，Yeoman 可能用于自动生成应用的基础模板和核心文件结构。 知识点四：任务运行工具 Grunt Grunt 是一个基于 Node.js 的自动化任务运行器，它允许开发者自动化常见的开发任务，如压缩文件、...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值