问题标签 [swiperjs]

我有一个组件类，需要能够使用.slideToLoop()and .update()，但无法弄清楚如何将这些方法与 Swiper React 库一起使用。

当单击其他内容时，我需要执行此操作，以便 Swiper 可以更新（因为它最初是隐藏的），然后滑动到相关幻灯片。

目前，componentDidMount()当我将内容移植到 React 中时，我在 jQuery 中有点击触发器。但如果更好的话，也很高兴改变这一点。单击发生在孙组件上。而且我将 swiper 实例设置为状态，但那发生在 之后componentDidMount，所以我无法从那里访问它。

代码：

和 Swiper 的返回部分：

任何帮助或建议表示赞赏。

我正在使用这个滑块：https ://swiperjs.com/api/

现在，我想在设备宽度等于或小于 515 时启动滑块。为此，我正在使用此 JS 代码，但当设备大于 515 时它不会停止滑块。它应该在设备宽度小于等于515：

进度条的过渡swiperjs：https ://swiperjs.com直到它更改到另一张幻灯片才反映实际进度。

我希望它像 Facebook 和 Instagram 故事一样在自动播放中显示：

我尝试通过添加watchSlidesProgress: true,文档中指出的参数，但没有监听事件。

关于如何做的任何帮助？

这是示例网站：http: //z-testing.000webhostapp.com/progressbar-animation/

这是我的代码：

我正在关注一个关于使用 Swiper.js 制作推荐滑块的教程，但遇到了一个问题。

这是 HTML 代码：

这是CSS代码：

这里的问题是，当执行时，它返回到全宽而不是指定的宽度。有快速修复吗？

我无法在 Swiper.js 的循环 swiper 中获取 textarea 的值。

这就是我所做的。

1. 我用一张幻灯片定义了一个滑动器，并在其中放置了一个文本区域。(id="aaa", 一个且唯一的文本区域)

2. 我定义了一个函数“getValue()”来显示文本区域的值。（使用 getElementById()、console.log()）

   函数 getValue(id){ var element = document.getElementById(id); 变量值 = 元素值；控制台.log（值）；}

3. 我启用了刷卡器的循环模式。

   // Swiper 设置 var swiper = new Swiper('.swiper-container', { allowTouchMove: false, loop: true,

4. 我用一个按钮执行了这个函数，它返回“”（空字符串）

5. 这是我的实验结果

• 当循环被禁用时，该函数在文本区域中返回正确的文本。
• 当 swiper 有多张幻灯片时，该函数仅对最后一张幻灯片中的文本区域返回 ""。

这是复制问题的完整代码。 https://jsfiddle.net/mjn7d385/

如何在循环滑动器中获取 textarea 的值？如果您对此有任何解决方案，请告诉我。

先感谢您。

有人可以帮忙吗？我的 swiper js 轮播需要一个幻灯片计数器，但这个计数器不起作用： https ://codepen.io/pen/?template=wvzKBdW

例如，如果幻灯片总数为 8，则起始值将如下所示： Slides: 0/8。当一张幻灯片移动时，它变成幻灯片：1/8，依此类推。

我找到了这个例子Showing number of slides on the web page，但它适用于旧版本的 swiper js，我找不到使用swiper js 最新版本的方法。在我的 codepen 中有我需要的版本。

谢谢！

是否可以在 onTouchStart 事件处理程序中从SwiperJS禁用对活动元素的模糊调用？

一些背景知识：
对于触摸和桌面设备，我使用 swiper 来制作 swiper-slides 上的表单。在我使用vue-select（一个组合框）的表单中。
问题：当用户选择一个条目时，第一次没有选择该条目，而是第二次选择了该条目。

另请参阅codepen上的此示例

我发现它似乎工作正常：

• 当我删除 vue-select 框的输入字段上的模糊侦听器时。但它用于在用户离开字段时关闭选择列表。
• 当我在 SwiperJS 中注释掉这个模糊调用时。我不确定为什么在那里使用它。

第一点不是一个选项，那么是否可以通过配置禁用 SwiperJS 的模糊调用？

我希望箭头位于图片库容器之外，因为很难看到它们。我已经尝试删除元素并将它们放在画廊容器之外，但我没有得到任何结果。

不确定是否有更好的方法来实现这种外观或另一个简单的 javascript 库？

我正在使用 vue-awesome-swiper 作为产品库。用户可以选择不同的产品，我希望画廊相应地更新。

如果产品有超过 1 张图片（大多数情况下），我希望刷卡器使用循环功能。如果产品只有 1 张图片，我希望它在没有循环功能的情况下工作。

假设我能够在正确的时间捕捉到它应该是真还是假，我怎样才能让刷卡器更新或重新初始化循环功能的不同设置？

我试过每一种组合

无论我做什么，要么循环功能保持不变，要么刷卡器实际上没有初始化。

编辑：这是代码的真正简化版本。你可能会问“他为什么要这么做？” 在几个位上。如果您看到完整的代码，那将是有意义的，但它有点太大，无法在此处发布。无论哪种方式，它都不应该影响对循环问题的解决方案的响应。

帮助表示赞赏！

需要一些关于 swiper 插件的说明。在其他页面中使用，它工作正常。仅在特定页面上，我们会手动更新图像以根据用户偏好进行更改。更改图像后，我们需要初始化 Swiper carosuel。

使用 swiper.init() 或 destroy(true, true) 以多种方式进行了尝试。但它没有初始化组件。不确定这个插件是否不支持这个逻辑。

我们是否可以像下面这样初始化 swiper 并在浏览器控制台中验证。