问题标签 [vue3-carousel]

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 投票
0 回答
46 浏览

vue3-carousel - 如果第一张或最后一张幻灯片,vue3轮播如何隐藏carosul-pre/next按钮

我正在使用 vue3-carosuel。如果它的第一张或最后一张幻灯片,我需要隐藏右左箭头。有没有办法实现它。

carousel:items-to-show="1" XXXXXX 一些显示幻灯片的代码XXXXXXX <template #addons>

0 投票
1 回答
2358 浏览

javascript - 如何在 Vue Js 中使用 swiper 断点

早上好,我正在为前端使用 VueJS 制作一个网站,我已经通过 npm 安装了 SwiperJS,以便 Vue 制作滑块。它工作正常,但我无法使功能断点具有响应数量的幻灯片。我使用此代码制作了一个响应式帖子部分,其中所有 4 个帖子都显示在 PC 视图中,而在移动视图上一次只显示一个(您也可以滚动到移动视图上的帖子)

这是我的代码:

滑块.vue

0 投票
1 回答
3684 浏览

javascript - Vue 3 ref 未更新为模板上的组件

我正在使用vue3-carousel包来显示images/videos我的项目。对于我来说,我遇到了意想不到的问题。我不知道为什么ref我的模板没有更新。我在vue组件中有这个逻辑,如下所示。

模板:

脚本:

你能回答我为什么删除图像时轮播组件中的数据没有更新吗?仅供参考: Ref 正在脚本中更新。

0 投票
0 回答
73 浏览

typescript - Flickity 渲染重复的幻灯片,直到 Inspector 关闭或打开

我的 Vue 3 Typescript 应用程序中的 Flickity 轮播正在运行时通过 for 循环动态填充幻灯片。

问题:

错误视频 添加到我的轮播中的最后一张幻灯片是唯一显示的幻灯片,当我尝试向左或向右拖动幻灯片时,我的拖动被忽略。对幻灯片导航按钮或页面点的点击会被注册并导致触发幻灯片更改回调,但幻灯片本身永远不会对任何这些点击进行动画/移动/反应。例如:如果我的 Flickity 轮播包含显示“1”和“2”的幻灯片,则幻灯片“2”(最后添加的幻灯片)将始终可见,并且根本不会响应导航按钮/页面点的单击或拖动。

它变得非常奇怪的地方:

当我在 chrome 中打开检查器时,Flickity 轮播立即开始显示独特的可滚动幻灯片。如果我在到达包含轮播的页面后关闭检查器,也会发生同样的事情;它“修复”了这个错误。

我试过的:

我认为检查器的打开或关闭可能会导致 Flickity 的某种内部重新加载调用,所以我尝试在添加所有幻灯片后故意重新加载轮播,但这对错误没有影响。当我在 Chrome 中打开/关闭检查器同时渲染轮播时,会发生一些独特的事情,这使得最后一张幻灯片从始终可见而“脱离”。

代码Page.vue

Flickity.vue

flickity.d.ts

0 投票
1 回答
378 浏览

javascript - 在 Vue3-carousel 中显示多个图像

我已经在网上广泛搜索了答案,但无济于事。

一个善良的灵魂可以向我解释一下,一个新手,我如何使用Vue3-carousel获得三个单独的图像?

我已经查看了 Vue3-carousel 文档,但如果解决方案在那里,我没有看到它。

我假设魔法发生在脚本区域的某个地方......

提前致谢。

0 投票
0 回答
38 浏览

vue.js - vue 3 carousel - 更改自动播放持续时间动态?

我有 Vuex 状态:

并想使用这些动作和突变来改变Vue 3 carouselautoplay中的值,

我如何获得新的状态值:

帮助,如何在不刷新轮播的情况下动态执行此操作?:)

0 投票
1 回答
152 浏览

vue.js - vue3-carousel 中如何调用方法

对使用 vue 非常陌生,我刚刚收到了关于如何根据文档访问 vue3-carousel 提供的 API 的简单问题:https ://ismail9k.github.io/vue3-carousel/getting-started.html

在 API 部分下,库提供了一些方法,例如我想使用:slideTo(index: number) 方法,文档提供的方法是在第二项而不是默认的第一项上启动轮播。

0 投票
1 回答
71 浏览

javascript - 使用 Object Literal 切换单个 Vue Ref 布尔值

我正在使用 Vue3、Vite 和 Vue3-Carousel 创建一个闪存卡应用程序。当用户点击卡片时,该卡片的文本应该从法语变为英语,从而使其他卡片保持原始状态。

我已经能够使用 switch 语句来实现这一点,但是在了解了对象文字之后,我一直试图让它工作。目前,应用程序将所有卡片(及其对应的 Vue Ref 布尔值)从法语切换为英语,而该卡​​片应仅被切换。

以下是我的代码示例:

我的问题是,如何使用我的切换功能而不是全部更新单张卡?

0 投票
2 回答
20 浏览

arrays - 在Vue3 typescript中将数组推送到相同类型的数组

我有一个 Obj1 数组。在项目 vue 3+ts 中,单击“加载更多”按钮后,我通过 axios 调用后端服务并检索相同类型的数组。我想将此行附加到前一个数组,但它不起作用:

this.Array1.push(response.data)

如果我当时添加 1 个项目,则 Array1 会更新:

this.Array1.push(response.data[0])

我错过了什么?