【Swiper】轮播图 笔记

文章目录

    • 场景
    • 代码(6.8.4)
    • 代码(11.1.4)

场景

官网:Swiper - 最现代的移动触控滑块 - Swiper 中文

最近用svelte写轮播图,用了Swiper组件。需求是:一共三张图,来回切,保持循环(1,2,3->2,3,1->3,1,2->1,2,3).

像这样:

在这里插入图片描述
版本:6.8.4和11.1.4

写一个博客记录一下学习过程和踩过的坑。

代码(6.8.4)

js:

初始化一个轮播图,有4个属性,分别表示:

  • 容器内显示3个轮播图
  • 选中的居中
  • 循环
  • 初始第2个居中(索引从0开始)
import Swiper from 'swiper/swiper-bundle';
import 'swiper/swiper-bundle.css';
import { onMount, afterUpdate } from 'svelte';let swiperContainer, swiperInstance;
onMount(() => {// 轮播图swiperInstance = new Swiper('.swiper-container', {slidesPerView: 3, //'auto'centeredSlides: true,loop: false,initialSlide: 1,});
})// 在数据更新后要更新一下轮播图
afterUpdate(() => {if (swiperInstance) {swiperInstance.update();}
});

html:

网络请求得到数据,原本使用循环渲染每一个slide,即3个。但是,这样会使得loop失效:使用loop的话(loop:true)要请求完图片才知道有多少个slide,会导致:一进页面不能立即显示轮播图。

我们期望一进页面就看到三个图(尽管没有图片,但有三个框)。

注意:这里我们loop:true,但是上面的js代码loop:false,原因后面说。

因此我们写死三个div。

但是:loop:true虽然会显示循环,但是效果不好,在循环的图active(选中居中)之前,它是没有图片渲染出来的。如:循3,1,2的 循3 是空的,要把 循3 滑到中间,即 循2,循3,1 ,循3 才会显示出图片,但是此时循2没有显示出图片。

解决方法:手动循环。div写死五张图,这样一进页面所有图都是渲染出来的。

<div bind:this={swiperContainer} class="swiper-container"><div class="swiper-wrapper"><!-- 手动添加第三张图,防止初次渲染不会复制出现空图 --><div class="swiper-slide"><img class="cover" src={coverList[2]} alt="coverImage" /></div><div class="swiper-slide"><img class="cover" src={coverList[0]} alt="coverImage" /></div><div class="swiper-slide"><img class="cover" src={coverList[1]} alt="coverImage" /></div><div class="swiper-slide"><img class="cover" src={coverList[2]} alt="coverImage" /></div><div class="swiper-slide"><img class="cover" src={coverList[0]} alt="coverImage" /></div></div>
</div>

手动实现滑动:

// 当滑动结束时,检查是否需要跳转到对应的复制图片,比loop配置好用
swiperInstance.on('slideChangeTransitionEnd', function () {if (swiperInstance.activeIndex === 0) {swiperInstance.slideTo(swiperInstance.slides.length - 2, 0, false); // 无动画地跳转到倒数第二张图片} else if (swiperInstance.activeIndex ===swiperInstance.slides.length - 1) {swiperInstance.slideTo(1, 0, false); // 无动画地跳转到第二张图片}
});

css:

注意要占满轮播图的容器空间,不然滑动时可能出现图片的偏移。

.swiper-slide是每个slide的类,.swiper-slide-active是选中居中的类,.swiper-slide-prev是选中居中的前一个的类,.swiper-slide-next是选中居中的后一个的类。

如果要样式穿透:

:global(.swiper-slide)

如果想防止循环的slide露出来(非页面的三个),可以将他设置为透明:opacity: 0;,将active、prev、next设置为opacity: 1;

代码(11.1.4)

import Swiper from 'swiper';
import 'swiper/css';
import { onMount } from 'svelte';onMounted(()=>{// 轮播图swiperInstance = new Swiper('.swiper', {slidesPerView: 3, //'auto'centeredSlides: true,loop: true,initialSlide: 0,});// 拿完数据后,前后滑动,为了显示全数据(不然左边没数据)swiperInstance.slideNext(0);swiperInstance.slidePrev(0);
})

样式基本没变。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/869484.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于YOLOv8深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

comsol达西定律的小例子

comsol达西定律的小例子

【深度学习基础】环境搭建 Linux报错bash: conda: command not found...

目录 一、 问题描述二、 解决方法1. 在.bashrc文件中添加环境变量2. 卸载重装anconda 三、总结 一、 问题描述 在linux环境下安装anaconda时候报错&#xff1a;bash: conda: command not found… 二、 解决方法 1. 在.bashrc文件中添加环境变量 参考链接&#xff1a;【解决】…

【单片机毕业设计选题24054】-基于STM32的水质检测系统

系统功能: 主要功能模块原理图: 电源时钟烧录接口: 单片机和按键输入电路: 传感器采集电路&#xff1a; 资料获取地址 系统主要功能模块代码 初始化代码: /* USER CODE BEGIN 1 *//* USER CODE END 1 *//* MCU Configuration-----------------------------------------------…

电脑虚拟摄像头怎么使用?电脑摄像头可以被虚拟摄像头替代吗?8款推荐!

在数字化日益普及的今天&#xff0c;视频通话和在线会议已成为我们生活和工作中不可或缺的一部分。然而&#xff0c;当我们的电脑没有配备摄像头&#xff0c;或摄像头出现故障时&#xff0c;我们可能会面临一些不便。这时&#xff0c;电脑虚拟摄像头便成为了一个实用的解决方案…

前端面试题37(js递归)

在JavaScript中&#xff0c;递归是一种编程技术&#xff0c;它允许函数调用自身来解决问题。这种方法通常用于处理分治策略的算法&#xff0c;比如遍历树形结构、计算阶乘、 Fibonacci数列等。下面通过几个示例来说明如何使用递归。 1. 计算阶乘 阶乘是一个经典的递归示例&am…

[激光原理与应用-102]:南京科耐激光-激光焊接-焊中检测-智能制程监测系统IPM介绍 - 6 - 激光焊接系统的组成

目录 一、激光焊接系统的组成概述 1.1、核心部件 1.2、焊接执行部件 1.3、辅助系统 1.4、控制系统 1.5、其他辅助设备 二、激光器 2.1 按出光类型分 1. 脉冲激光器 2. 连续激光器 3. 准连续激光器&#xff08;QCW&#xff09; 4. 其他常见激光器 5. 应用领域 2.2…

C 语言中如何进行冒泡排序?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; &#x1f4d9;C 语言百万年薪修炼课程 通俗易懂&#xff0c;深入浅出&#xff0c;匠心打磨&#xff0c;死磕细节&#xff0c;6年迭代&#xff0c;看过的人都说好。 文章目…

JVM内存泄露的ThreadLocal详解

目录 一、为什么要有ThreadLocal 二、ThreadLocal的使用 三、实现解析 实现分析 具体实现 Hash冲突的解决 开放定址法 链地址法 再哈希法 建立公共溢出区 四、引发的内存泄漏分析 内存泄漏的现象 分析 总结 错误使用ThreadLocal导致线程不安全 一、为什么要有Thr…

Qt开发 | Qt绘图技术 | 常见图像绘制 | Qt移动鼠标绘制任意形状 | Qt绘制带三角形箭头的窗口

文章目录 一、基本绘图技术介绍二、常见的18种图形、路径、文字、图片绘制三、Qt移动鼠标绘制任意形状四、Qt绘制带三角形箭头的窗口 一、基本绘图技术介绍 Qt提供了绘图技术&#xff0c;程序员可以在界面上拖动鼠标&#xff0c;或者在代码里指定参数进行绘图。 Qt绘图技术介绍…

如何在 C 语言中实现链表?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; &#x1f4d9;C 语言百万年薪修炼课程 通俗易懂&#xff0c;深入浅出&#xff0c;匠心打磨&#xff0c;死磕细节&#xff0c;6年迭代&#xff0c;看过的人都说好。 文章目…

vue子组件调用父组件方法

父组件 页面<popoverss ref"pop" :goodspop"goodspop"></popoverss>子组件components: {"popoverss": () > import(../comm/popover.vue)},方法goodspop(e){console.log(e"----")return 9999;},子组件 方法props:[go…

习题练习以

题意&#xff1a;求i&M的popcount的和&#xff0c;i属于0……N 主要思路还是变加为乘。 举个例子N22&#xff0c;即10110 假设M的第3位是1&#xff0c;分析N中&#xff1a; 00110 00111 00100 00101 发现其实等价于 0010 0011 0000 0001 也就是左边第4位和第5…

《AIGC:智能创作时代》:AI创作革命来临,你准备好了吗?

想象一下&#xff0c;你正在欣赏一幅精美的画作&#xff0c;惊叹于其细腻的笔触和独特的构图。然而&#xff0c;当你得知这幅作品是由人工智能创作时&#xff0c;你会作何感想&#xff1f;这不再是科幻小说中的场景&#xff0c;而是我们正在经历的现实。 在这个AI技术飞速发展的…

QListWidget、QTreeWidget、QTableWidget的拖放

QListWidget、QTreeWidget、QTableWidget的拖放实验 QAbstractItemView::DragDropMode 的枚举值 QAbstractItemView::NoDragDrop0组件不支持拖放操作QAbstractItemView::DragOnly1组件只支持拖动操作QAbstractItemView::DropOnly 2组件只支持放置操作QAbstractItemView::DragDr…

Python中JSON处理技术的详解

引言 JSON&#xff08;JavaScript Object Notation&#xff09;作为当前最流行的数据传输格式&#xff0c;在Python中也有多种实现方式。由于JSON的跨平台性和简便易用性&#xff0c;它在数据交互中被广泛应用。本文将重点讨论如何熟练应用Python的JSON库&#xff0c;将JSON数…

FFmpeg 实现从麦克风获取流并通过RTMP推流

使用FFmpeg库实现从麦克风获取流并通过RTMP推流&#xff0c;FFmpeg版本为4.4.2-0。RTMP服务器使用的是SRS&#xff0c;我这边是跑在Ubuntu上的&#xff0c;最好是关闭掉系统防火墙。拉流端使用VLC。如果想要降低延时&#xff0c;请看我另外一篇博客&#xff0c;里面有说降低延时…

浏览器开发者视角及CSS表达式选择元素

点击想要查看的接口&#xff0c;然后点击检查&#xff0c;便可以切换到该接口对应的html代码 如果F12不起作用的话&#xff0c;点击更多工具&#xff0c;然后选择开发者工具即可 ctrlF可以去查阅相关的CSS表达式选择元素 如果没有加#t1&#xff0c;那么表示的是选择所有的p 使用…

图解HTTP(5、与 HTTP 协作的 Web 服务器 6、HTTP 首部)

5、与 HTTP 协作的 Web 服务器 一台 Web 服务器可搭建多个独立域名的 Web 网站&#xff0c;也可作为通信路径上的中转服务器提升传输效率。 用单台虚拟主机实现多个域名 在相同的 IP 地址下&#xff0c;由于虚拟主机可以寄存多个不同主机名和域名的 Web 网站&#xff0c;因此…

Linux-多线程

线程的概念 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程是“一个进程内部的控制序列”一切进程至少都有一个执行线程线程在进程内部运行&#xff0c;本质是在进程地址空间内运行在Linux系统中&#xff0c;在CPU眼中…