问题标签 [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 投票
4 回答
13074 浏览

vue.js - Nuxt js 上的 vue-awesome-swiper(swiperjs) 不能在生产环境中工作,但可以在开发环境中工作

我正在使用 vue-awesome-swiper 并按照此处的步骤操作:https ://github.com/surmon-china/vue-awesome-swiper 。我选择在 Nuxt js 中全局注册这个插件。

问题:开发工作完美无缺,幻灯片在每一页上,导航工作正常。另一方面,制作中的所有幻灯片都在第一页,这里的导航工作使其他页面空白,因为所有幻灯片都在第一页上。

在开发上: 开发服务器轮播

生产时: 生产服务器轮播

这些是我的文件:

插件/VueAwesomeSwiper.js

nuxt.config.js

滑块.vue

我不确定我做错了什么。有人可以帮忙吗?谢谢!

0 投票
1 回答
1983 浏览

javascript - 如何防止点击移动到swiperjs中的下一张幻灯片?

如何根据我的逻辑取消单击 swiper 中的下一个按钮?

我在基于swiperjs 的 vue 中使用swiperjs,并且我想阻止用户根据我的逻辑函数的结果滑动或单击按钮转到下一张幻灯片。

我试试这个 - 不起作用。

和这个:

没有任何效果 - 刷卡器仍然移动到下一张幻灯片。

如何防止点击移动到下一张幻灯片?

Codesandbox.io 上的代码

0 投票
1 回答
1688 浏览

javascript - 如何在 vue.js 中销毁滑块 vue-awesome-swiper?

我需要销毁桌面上的 vue-awesome-swiper 并留在平板电脑屏幕上。完全销毁,而不是禁用滑动。但是我可以摧毁 swiper 吗?在指令 :options 中,我传递了参数,并且组件标签 swiper 在任何情况下都将起作用。只有没有传递的参数

0 投票
1 回答
352 浏览

javascript - 对网站上的冲突元素进行故障排除

我在一个网站上工作,似乎有冲突的元素。

我从一个模板开始,其中包含许多来自不同地方的“借用”CSS 和 JS 元素,现在我正在尝试添加一个Slick 幻灯片,并且 JS 或 CSS 中存在冲突,阻止我编辑 Slick滑块(部分 slick-slider 代码已经存在于“有机农场”模板中)。

现在我有js/core.min.js,js/script.js并被js/slick.js加载到页面中,然后在索引页面的底部:

HTML部分是:

有没有办法找出我的自定义脚本不活动的原因?箭头也没有出现。对于任何 HTML 和 CSS,我使用 Firefox 的 Inspector,但在这里我真的很难过。

0 投票
0 回答
300 浏览

jquery - 如果位置固定,如何为滑块字幕设置动画?

我正在使用Swiper滑块,并为它创建了一个固定位置的标题。我不希望他们像往常一样随着幻灯片移动,所以我从幻灯片中取出了标题。我让它工作了,但我在用GSAP动画标题时遇到了麻烦。我知道 GSAP 是如何工作的,但我不知道如何在这种特殊情况下为标题设置动画。

例如:如果幻灯片发生变化,则上一张幻灯片标题淡出 + 上滑,下一张幻灯片标题淡入 + 上滑。我希望你明白我的意思。

也许这里有人可以帮助我:https ://jsfiddle.net/x0sukfd6/

谢谢你。

0 投票
1 回答
381 浏览

swiper - 有没有办法在不触发更改事件的情况下移动到特定幻灯片?

我目前正在为角度https://www.npmjs.com/package/ngx-swiper-wrapper使用 swiper 包装器,所以基本上我想区分用户执行的手动幻灯片和我自己的应用程序预选活动幻灯片。

每当我使用 setIndex 方法(大概相当于 swiper js 中的 goToSlide)时,它都会触发各种手动幻灯片更改也会触发的 changeEvent(transitionEnd、slideChange 等)。

有没有办法在不触发这些事件的情况下更改活动幻灯片?

0 投票
0 回答
1641 浏览

javascript - Carousel Vue Awesome Swiper 有错误循环

我在 Nuxt 工作,我有一个来自 Vue Awesome Swiper 的轮播的错误,我的问题是它没有像我希望的那样无限循环,这有多个滑块,我认为这是问题 在这里输入图像描述 当我想要转到左侧的产品它不会在循环结束时结束,等等相反,如果我转到末尾以下元素不会将我发送到循环的开始

这是我的设置代码

这是我的html的摘要

在代码中它看起来像这样在此处输入图像描述,但如果它正在工作应该有许多 DOM 副本,它可以使用一个滑块进行查看。看到有几个人工作了,但是还是报循环中的一个bug的案例,这个是工具https://github.com/surmon-china/vue-awesome-swiper

0 投票
1 回答
242 浏览

swiper - 我看不到按钮导航和分页分数

我尝试在我的 swiper.js 上添加导航按钮和分页分数,我可以在 html 代码中看到导航元素和按钮元素。我可以看到我的 swiper 已显示,但未显示按钮和分页。

这是我的代码

你能帮我吗 ?

0 投票
4 回答
12704 浏览

javascript - SwiperJS - 上一个和下一个按钮不起作用

我正在使用 SwiperJS (www.swiperjs.com),我遇到了滑动到下一张照片的问题,但上一个和下一个按钮没有。我已经查看了我可以在这里找到的每一篇文章以及遵循他们的文档,但仍然没有任何运气。

为了初始化 Swiper JS,我也从他们的网站上尝试过:

有人对我可以尝试什么有任何想法吗?我还发现分页按钮没有像他们的示例那样显示在底部,但与上一个和下一个按钮不起作用相比,这不是一个问题。就像我说的,如果我单击并拖动或“滑动”,它会很好地移动到下一张幻灯片,所以我假设它与 JS 部分有关,但不确定要尝试什么。

0 投票
1 回答
1021 浏览

css - Swiper js 不会自动调整 swiper-container 和 swiper-slide 类的大小

我有一个刷卡器,其中包含动态创建并添加到刷卡器轮播的 mdbootstrap 卡。swiper 类默认为该部分的最大高度,即 1333px,而不是 swiper 来调整卡片高度。这些卡片的平均大小约为 400 像素。更令人沮丧的是,我在一个单独的文件上还有 3 个其他 swiper carousels 运行良好。我尝试使用 autoHeight 参数并将其设置为 true,但这不起作用。我只是剪掉了一半的牌

这是工作实例的代码

这是不起作用的实例的代码

这是工作版本的样子。

这是我得到的,这不是我想要的结果

这是我使用 autoHeight 时得到的结果:true

老实说,我很后悔使用 swiperjs。它太不可预测了。基本上现在只是容忍它,因为我对这个项目非常深入。是否还有其他类似于 swiper 的更易于使用的轮播框架?