swipe的基础使用（二十三）

最新推荐文章于 2024-08-31 07:52:57 发布

花开艳丽终消散

最新推荐文章于 2024-08-31 07:52:57 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： swiper介绍文章标签： html5 web前端框架移动 swiper

本文链接：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万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

花开艳丽终消散

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

2558

目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter

3 条评论您还未登录，请先登录后发表或查看评论

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"

MathQ 开源项目教程

gitblog_01168的博客

08-28

428

MathQ 开源项目教程 1. 项目的目录结构及介绍 mathQ/ ├── docs/ │ ├── README.md │ └── CONTRIBUTING.md ├── src/ │ ├── main/ │ │ ├── App.js │ │ └── index.js │ ├── config/ │ │ ├── default.json │ │ └─...

Cardboard 开源项目使用教程

最新发布

gitblog_00421的博客

08-31

271

Cardboard 开源项目使用教程 1. 项目的目录结构及介绍 cardboard/ ├── README.md ├── LICENSE ├── src/ │ ├── main.cpp │ ├── config.h │ ├── utils/ │ │ ├── logger.cpp │ │ └── logger.h │ └── modules/ │ ├──...

python基础知识

DaenerysTargaryen的博客

09-11

4153

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官网粘贴。因为是缩略图，所以上面有图片（大图），下面也有图片（小图）

vue-swiper多图片，缩略图双向控制

Mr_Black_Rabbit的博客

09-26

1186

vue-awesome-swiper: 4.1.1 swiper: 5.4.5 效果图: 代码: <template> <div class="box"> <div class="swiper-box">  <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop"> .

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

Durfee刷卡应用开发教程：AngularJS与常用工具介绍

在 durfee-swipe 项目中，Yeoman 可能用于自动生成应用的基础模板和核心文件结构。知识点四：任务运行工具 Grunt Grunt 是一个基于 Node.js 的自动化任务运行器，它允许开发者自动化常见的开发任务，如压缩文件、...