问题标签 [swiperjs]

基于这个 swiper ( https://github.com/nolimits4web/swiper )，我创建了一个具有淡入淡出效果的全屏图像滑块，懒惰的 laod 并向它添加了图像标题。我只有 html 的基本技能，所以请和我一起裸露:) 下面你可以看到我的代码：

我的目标是创建一个带有图像标题的全屏滑块，只要出现新图像，它就会发生变化。此外，通过实现延迟加载，我希望首先加载低分辨率图像，并在实际图像准备就绪时被替换。另外，在移动设备上显示不同的图像。

现在我有两个问题：

1：首先加载低分辨率图像，但不替换为全分辨率图像。不知道是不是图片大小的原因？移动图像效果很好。但是，我在这里想知道如何将移动低分辨率图像也放在那里，因为图像与桌面版本不同。或者我在这里错过了什么？

2. 图片标题随着幻灯片移动，但不幸的是，由于淡入淡出，它总是有点重叠。例如，当我将动画切换到 crossFade 时，它​​可以正常工作。我认为问题在于淡入效果。但是我找不到如何解决它的解决方案。我添加了图像标题重叠的屏幕截图。

Screenshot_image-caption

如果你们中的某个人可以帮助解决它，我将非常感激。如果有什么不清楚的，请随时询问。正如我所提到的，我对这一切都很陌生:) 非常感谢。

我正在尝试使用 React 构建电影搜索网络应用程序。我查询 themoviedb.com 以获取电影信息并向用户显示海报/电影标题。

我正在使用 Swiperjs 向用户水平显示电影海报和标题。不幸的是，当我将电影信息 map() 到 SwiperSlide 组件时，滑块不会滑动。它似乎结结巴巴，拒绝从第一张电影海报上移开。任何人都可以向我发送正确的方向，为什么它不起作用？

奇怪的是，在随机刷新时，随机流派将完全正常工作，直到重新加载，但只有一个流派组件会这样做。

流派组件：

电影卡组件：

- - 更新 - -

这是我从 SwiperJs 使用的Swiper组件

这是 SwiperSlide 组件：

另外，我在这里有一个关于这个问题的工作示例...... https://codesandbox.io/s/blue-mountain-0fjyc?file=/src/App.js 在这个例子中，点击浏览器上的刷新，那就是我所看到的。

- - 更新 - -

仍在做这个项目，我创建了一个电影详细信息页面，显示带有 Swiper 的演员表（我知道这真是个傻瓜）。它工作得很好，但如果我用下面的 MovieDetail 组件中的工作代码替换 GenreComponent 代码中的代码，它仍然无法工作......

--- 最后更新 --- 问题已解决！我认为 Swiper 在任何东西进入之前就已初始化，因此 Swiper 认为它的幻灯片为零并且无法运行。我通过添加一些条件渲染来检查电影变量的长度来解决这个问题。最初，这不适用于条件渲染，因为我忘记添加长度检查。

前：

后：

我想做的很简单，至少我是这么想的。Swiper.js API 记录了一个布尔参数，该参数被称为init允许禁用 swiper 的自动初始化。

我想做的是像这样全局定义刷卡器：

并在点击卡片时对其进行初始化，如下所示：

这样做的问题是浏览器抛出错误并且脚本不起作用。这是错误：

无法读取未定义的属性“推送”

不知道是什么问题，因为Swiper API明确说明设置init参数为false后，可以通过调用手动初始化carousel.init()

我正在尝试使用 Swiper 在我的反应库中显示我的数据库中的图像。特别是，我希望每个视图都有居中 + 自动幻灯片。调整窗口大小后，画廊工作正常。这是我的组件的渲染功能。

该变量imgs是根据状态计算并动态变化的。每次imgs都会改变我也打电话this.swiperRef.current.swiper.update()，但它似乎没有帮助：

这篇文章：Swiper slider not working unless page is resized没有帮助，因为既没有observer，observeParents也没有observeSlideChildren被识别为 swiper 对象的反应属性。

我认为问题出在update()调用发生在图像渲染之前，因此它们的宽度被假定为零，正如在 swiper 之后记录时可以看到的那样update()：

任何帮助，将不胜感激。我也不太明白“虚拟”是什么意思。

我有一个使用 Wordpress 和 Elementor 构建的网站。

在这个站点中，有一个 SwiperJS Carousel（Elementor 将其用作轮播小部件），当点击这个 swiper 时，它会打开一个带有另一个 Swiper 的灯箱（相同的内容，只是更大）。

我的问题是：Elementor 不会让你改变灯箱滑动器的方向。我需要改变它:)

所以我的问题是： 有没有办法在加载后改变滑动方向？

有任何想法吗？

我正在尝试实现一个刷卡器。我有一个使用 Angular Universal 的应用程序。当我最初加载我的应用程序时，刷卡器会初始化，但有一个错误让我左右滑动太远。如果我尝试滑动太远，它不仅会弹回。

当我使用刷卡器离开页面然后返回时，刷卡器按预期工作。我假设这与服务器端渲染有关。有没有其他人遇到过这个问题？

这是我的配置：

就像我说的，它似乎在浏览器应用程序中运行良好，但我无法让它在服务器上运行。

试图建立一个带有更多照片的swiper的网站。在 Mac 和 PC 上的各种浏览器上，它运行良好，但在我的图像数组中有 50 多个图像后，在 ios safari 上失败。失败是IOS Safari尝试加载页面，自动刷新并反复尝试，然后显示一条消息说网站加载失败。

在 IOS Firefox 上也是如此。

在收集数组中的图像名称（没有大小和扩展名）之后，我在 CMS（LEPTON）中使用一些 PHP 构建的源代码：

我初始化滑块的 JS 如下所示：

知道出了什么问题或者我可以改变什么来解决我的问题吗？

提前谢谢

我尝试将我的幻灯片放在我的swiper-container. 最终版本需要如下图所示：

SwiperJs - 最终版本（大、中、小屏幕尺寸：）

每个分页点都应该自动与一张卡片相关联。

我不确定如何实现这一目标。卡片未正确居中。

不确定，但由于固定宽度，居中不起作用swiper-slide吗？如果我不给幻灯片一个固定宽度，它实际上会正确居中，但是卡片设计当然会被“压碎”。

这是我的代码：

Swiper-JS

CSS

HTML

我很难弄清楚如何在移动到另一个滑块之前等待或延迟滑块约 1 秒。下面是JavaScript。我没有分享 html 代码，因为它太长而且我的问题看起来很乱。我希望你们中的一些人有想法。我真的很感谢你的帮助。

js代码

我一直在努力尝试将 SwiperJS 实施到我的 Statamic 3 项目中。

我有一个工作轮播/滑块，当不使用 data-src 和延迟加载时，它工作得非常好。但是一旦我尝试按照他们网站上的指南实施延迟加载。我得到一个带有无限加载器的白色图像/背景或一个白色图像/背景而没有加载器。

这是我的代码：

HTML（图像来自鹿角 foreach）：

我的 JS：

当前结果：

任何人都知道为什么我的图像没有被渲染？

亲切的问候，罗伯特