问题标签 [swiper]

well the code is a lot, but the issue can be summarized like this:

I got two files with html, one of them (main.html) has 2 swipers (indexSwiper, testimoniesSwiper) that works perfectly on mobile and desktop, afterwards I want to duplicate one of those swipers in a next file (events.html) I just bring the code to this file and change the content (just text inside the swiper but the structure is the exactly same).

However this second swiper on mobile doesn't detect touch event or at least doesn't do anything when i swipe with my finger and I got a JS file that look for the pathname on the window.

If this pathname is main.html i would do some on.ready If is events.html I would do other things (create the swiper object through a function that I made - which works previously). Some idea what I can be missing?

我正在尝试将 RSS 提要加载到滑块中。滑块处于循环模式，因此在此模式下您将获得无限滚动，并且第一张幻灯片将在最后一张之后重复。所以我的 RSS 幻灯片实际上有 2 张幻灯片。

现在的问题是内容只有在有一个 div 时才会加载。

我的 jQuery 加载 rss 文件：

kantivi_rss.php 文件只是一个 RSS 加载器，它会回显内容。这一切都有效

现在，必须在滑块内容中加载提要的部分如下所示：

如果我不把滑块放在一个循环中，那么只有一个

而且效果很好。但是在循环模式下，它不会加载 RSS 内容，因为其中有 2 张幻灯片，其中包含<div id="rssblok">div。

希望问题很清楚，如何解决这个问题？

我试图在一个页面上添加多个 Swiper 实例，除了可折叠容器（Bootstrap 或 jQuery mobile）内的那些之外，这些实例都可以正常工作。只有第一个面板上可见的 Swiper 运行良好，其余的则不行。

如果父容器不可见，看起来 Swiper 无法初始化。将不胜感激任何解决方法。

这是示例代码：

});

半工作 JSFiddle

如何从这样的指令中获取属性：

进入下面的这个控制器：（我想用属性替换下面的模式：'水平'，或者将我上面的 HTML 上的内联属性与下面的属性合并..

基本上我想要做的是在我的 JQuery Mobil 应用程序中在具有垂直滚动内容的 div（幻灯片）之间滑动。

目前我已经使用owl carousel和iscroll5的组合来完成它。不幸的是，owl carousel 目前不支持无限滚动——它不会从最后一张幻灯片滑回第一张幻灯片。

因此，我再次尝试使用各种轮播插件的组合来实现这一点，例如带有 iscroll 的excolo carousel、带有iscroll 的 swiper 等，以创建水平轮播，其中每张幻灯片都将具有垂直滚动的内容。

但我无法让这些插件一起工作。excolo 和 iscroll5 工作正常，除非幻灯片的数量正好是 3。swiper 和 iscroll 也有问题，因为 iscroll 没有应用于由 swiper 动态创建的重复元素。

最近我发现 swiper 有一个滚动条插件，但是它用水平滑块水平滚动，用垂直滑块水平滚动，但我需要相反的行为。我试图通过在带有 iDangerous swiper 的水平滑块内嵌套一个垂直滑块来实现这一点。

有没有其他人做过这样的事情？

忘记插件，有什么方法可以实现吗？

（请不要问你试过什么，我用所有这些组合编写的代码不能放在一个问题中，我会尝试把我正在用 swiper 做的事情和它的 scollbar 插件..)

我在一个页面上有两个 Swiper，它们是链接和同步的。两者都是循环播放并显示大约 60 张幻灯片（长度是动态的）。两个 Swiper 都有分页功能，点击“下一个”和“上一个”按钮（.swipePrev() 和 .swipeNext()）都可以正常工作。

第一个 Swiper 只显示一个大图像，第二个是带有缩略图的轮播（显示活动的一个，以及两个上一个和两个下一个幻灯片）。当我在其中任何一个上翻页时，活动索引会更新，活动幻灯片以小图片为中心，大图片也会更新。

我现在想添加功能以在单击轮播中的幻灯片时同时更新两个滑块。我在轮播中添加了以下代码：

当我单击它一次时，它工作正常，但在第二次单击时它不再起作用。

有趣的是，在我使用常规寻呼机（两侧的箭头按钮）或滑动后，事件再次起作用。似乎正在发生的事情是，当我使用 .swipeTo() 时，活动索引没有正确更新，但是当我使用 .swipeNext() 或 .swipePrevious() 时，它得到了纠正。

Swipers 的初始化是（先大一个）：

我尝试设置活动索引，但这不起作用。当我在 onSlideClick 事件中发出任何警报时，我发现该事件仍与 Swiper 相关联，但它在 swiper 代码中的某处停止。

有没有人对此也有任何问题，最好的方法是什么？我认为这与 Swiper 代码中的 params.onSlideClick _this.allowSlideClick 切换有关，但我无法确定具体是什么。

编辑：并非不重要，我使用的是 Swiper 2.4.2+

我正在使用 iDangerous Swiper 插件。我需要定期更改 ajax 方法中的所有幻灯片。什么是最好的方法来做同样的事情。

我在 IE 9/10 中遇到了 iDangerous 响应式刷卡器的问题。

最后一张幻灯片下降到第一张幻灯片下方，因为（我认为）包含所有幻灯片的元素的宽度计算不正确。

http://jsfiddle.net/Msffg/

我正在调用一个简单的 swiper 函数：

并在 $(window).on('resize'); 上调用 resizeFix();

该问题仅发生在某些窗口大小上，因此快速调整视口大小应该会发现问题。

谢谢

编辑：当窗口被调整大小时，脚本被触发并正确执行。非常感谢Сър Георги Демирев！

我一直在思考一个问题很长一段时间，但我似乎无法抓住它。在一个摄影作品集网站上，我使用 iDangero.us Swiper 制作幻灯片，使用 JQuery Isotope 制作缩略图库。

现在，它在 Linux 和 Windows 7 上的 Firefox 和 Chrome 上运行良好。

但是，在 IE、Safari 和 Opera 上，网格项显示在垂直线上，而不是网格。

为了找到错误，我从所有内容中删除了代码，直到我发现 Isotope 在我删除代码的 Swiper 部分时停止了这种行为。

父 div 显示为 0 px 高度。将这些更改为固定高度（例如 1000 像素或 100%）不会改变任何内容。

• 这是原始网站：http ://anthron.octans.uberspace.de/meta.php

• 这是一个仍然会产生错误的最小示例：

• http://anthron.octans.uberspace.de/meta.debug.php

• 以及最小的源代码： http: //pastebin.com/H6t9bbNC

编辑：这是 Сър Георги Демирев 建议的实现：

• http://anthron.octans.uberspace.de/meta.debug.2.php

它现在可以工作，但是网格项目后的边距消失了，并且仅在窗口调整大小后才返回。不过现在更进一步了。

我非常感谢任何建议，我对这个一无所知......

我正在使用 Bootstrap、idangero.us swiper 和 Leaflet.js 开发一个 Web 应用程序。我在顶部有一个导航栏（50px），在下面有一个 id="swiper-area"，它应该采用“高度：100% - 导航栏的高度”。我正在使用 CSS 执行此操作：

这在桌面浏览器中运行良好。但是大多数移动浏览器（尤其是 Android）无法解释 CSS calc，这弄乱了我的地图。

如何使用 jQuery 实现这种行为？谢谢你的任何建议。