问题标签 [swiperjs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
333 浏览

javascript - swiperjs init 后可以修改slidesPerView 的数量吗?

我正在尝试在启动后修改 swiperjs 中每个视图的幻灯片数量。在 API 中,我找不到任何允许我更新它的方法。目前,刷卡器的每个视图创建 1 张幻灯片,我想在启动后将其更改为每个视图 3 张。

我怎样才能做到这一点?

0 投票
0 回答
308 浏览

lazy-loading - 带有惰性大小的 Swiper 5

我需要延迟加载方面的帮助。我在这里使用这个刷卡器(https://github.com/nolimits4web/swiper)在一个设置为自动播放并具有淡入效果的网站上创建一个全屏刷卡器。为了减少加载时间,我还包括了延迟大小(https://github.com/aFarkas/lazysizes),因为在刷卡器中的延迟加载我的字幕不起作用。它们总是重叠的。

但是我现在的问题是它以某种方式加载图像,即使它们不在视点中。我对编码很陌生,所以请与我裸露:) 我在下面发布我的代码,希望有人可以在这里帮助我或解释我需要做什么。非常感谢!

0 投票
1 回答
1054 浏览

swiper - 为 Swiper Pagination Bullet 添加多个类

我正在尝试为element class每个分页项目符号添加一个新的,并且我想保留swiper. 所以我所做的是

我能够获得风格swiper-pagination-bullet和我的自定义风格。但是,其他功能不再起作用(例如单击功能、主动选择)

我试图检查代码,看起来swiper当前没有处理多个类,因为这行代码返回empty,因为它只需要一个类。

有什么解决方法吗?我喜欢为此创建拉取请求,但我想问问我在这里失踪的社区。

0 投票
1 回答
1211 浏览

javascript - SwiperJS:如何同时启用方向垂直和水平滑动事件

我使用 SwipperJS 形成一些滑块,我需要启用垂直和水平滑动事件,bot。选项“方向”只允许direction: 'vertical'|'horizontal'一个方向,所以我怎样才能为滑动事件启用两个方向滑动到底部和顶部,向左和向右滑动以更改到下一张幻灯片或上一张幻灯片。

0 投票
3 回答
3675 浏览

javascript - Reactjs,swiperjs,Css-如何将分页移到滑块之外?边距,填充不起作用

请帮助。我尝试了很多,但没有用隐。

https://github.com/Sohit-Kumar/React-swiper-Pagination

CSS

我尝试使用底部:-10px 它被隐藏了

0 投票
0 回答
742 浏览

reactjs - 用于服务器端渲染时,Swiper 有时会很大

我正在使用 REACT 版本的 swiper。当您加载页面时,它一切正常。这就是我编码的方式:

现在该错误仅在特定情况下发生。首先,我使用https://vercel.com/使用服务器端渲染。当您进入登录页面:https ://bouclesandwaves-p67ctnmpb.vercel.app/login 并登录时,您可以使用测试帐户:test@test.com 密码:test

然后它重定向到主页,然后就很好了。然后你注销(按右上角的用户图标 -> 注销),然后使用凭据再次登录,然后图像会很大(注意幻灯片上的样式宽度):

这些是我已经在 swiper 上添加的额外样式:

我已经尝试过不同的样式(比如包装或幻灯片或图像等的最大宽度,但这并不能解决问题)

请注意,当我在本地运行项目时,我没有任何问题,因此我认为它必须与服务器端渲染有关。

对此我能做些什么吗?为什么它在第二次(而不是第一次)重定向之后发生?另外,如果我只是使用菜单栏更改页面,那么根本没有问题

0 投票
1 回答
42 浏览

javascript - Javascript ES6 书单错误

应用演示https://scannerbug.ne​​tlify.app/

这是一个简单的 Web 应用程序,可根据 API 检查扫描的条形码,并将返回的数据添加到书单中。

问题是我第一次扫描一本书时,只添加了一本书,第二次添加了两本书(这使它成为三本书),第三次添加了三本书(这使它成为列表中的六本书)。这样,当我只扫描三本书时,我就在列表中获得了 6 本书。

谁能帮我?如果您无法理解我的代码中的某些内容,我将提供所需的任何信息。

Pastebin JS 代码:https ://pastebin.com/dj7Pi1JE

0 投票
1 回答
3906 浏览

javascript - react-id-swiper 导航箭头按钮和分页不起作用

我正在尝试在我的项目中使用react-id-swiper。我只是按照本网站所示的示例进行操作:https ://react-id-swiper.ashernguyen.site/example/navigation 。

由于某种原因,导航按钮(左右导航箭头按钮)对我不起作用。我什至尝试使用分页,即使那样也行不通。

这是我创建的代码框:https ://codesandbox.io/s/peaceful-leftpad-9cgts?file=/src/App.js

这是我正在使用的代码:

我有从这里获取的代码示例:https ://react-id-swiper.ashernguyen.site/example/navigation 。有人能告诉我我错过了什么吗?

0 投票
2 回答
708 浏览

swiper - 如何使用 Swiper Js 创建一个股票模式滑块

我想用 swiper js 创建一个股票报纸模式滑块。我使用了以下代码,它们无法正常工作。

请建议我该怎么办?

0 投票
1 回答
2296 浏览

vue.js - 如何在 Vue3.0 中使用 Swiper slideTo()?

Vue版本:3.0.2

刷机版本:6.3.5

我想在Vue3.0中使用Swiper的slideTo方法,但是好像不行。

你能告诉我如何使用它吗?https://codesandbox.io/s/interesting-hooks-1jblc?file=/src/App.vue