问题标签 [splidejs]

我面临媒体查询的问题。我尝试使用 chrome 开发工具在不同设备上进行设计。但是找不到任何帮助来解决问题。

我只想要正确的媒体查询和有关媒体查询的解释，这将帮助我了解如果我遇到类似问题如何应对。

我对 NuxtJS 相当陌生，所以如果它是一个新手问题，请原谅我。我使用 JavaScript、Tailwind 和 SSR 设置 NuxtJS。所以下面的代码工作正常，但我想从包中导入 Splide。

页面/index.vue

我尝试通过这些步骤导入它：pages/index.vue

插件/splide.js

nuxt.config.js

但这在我的浏览器控制台中给了我以下错误：

试用 vue 滑块：

插件/splide.js

给我这个错误：

找到合适的班级我没有什么问题。我正在制作滑块，我想在名为“is-active”的类的最后一个元素上设置 margin-left。我无法在 js 中找到这个类，但在 web 的控制台中它是可用的。是什么原因以及如何获得最后一类元素？

如果我在控制台中输入相同的 js 中的内容，则有 5 个真和 2 个假。为什么这些元素在脚本中不可用？

我需要的是一个控制显示滑块的缩略图滑块。在 Splide 文档（https://splidejs.com/integration-react-splide/）中，他们使用基于类的组件中调用的同步方法来执行此操作：

如何在功能组件中实现相同的效果？到目前为止，我所拥有的归结为：

我使用 splide js 创建了一个 splider。它正在自动播放，延迟设置为 5 秒：

这是html

请注意，我将“延迟”类添加到“splide__slide”类中。那是我想将自动播放延迟几秒钟的课程。

我在页面上使用 Splide 作为全角滑块，其中的图像取自我的数据库循环：

我的javascript触发滑块：

该cover选项使图像成为 div 的背景并且可以被覆盖，perPage和gap选项padding用于使淡入淡出工作。

文档没有说明如何激活自动播放，我认为这意味着自动激活，相反，它只说明了如何添加进度条：

我错过了什么吗？一切正常，滑块显示，图像显示，单击箭头时发生淡入淡出，我的控制台没有错误。任何想法？

我有一个元素具有不同设备的给定来源。我无法正确设置它们的样式，以便图像拉伸以填充容器，这会导致 iPhone 12 pro Max 等更大屏幕上出现空白。

如何将<source>元素中的<picture>元素设置为样式width: 100%, height: 100%;？

我已经尝试过设置display:flex;应该相当于object-fit: cover;但它不起作用。

您可以在下面看到设备上的不同结果。在第一张图片中，右侧仍有空白（iPhone 12 Pro Max）。在第二张图片上，图像完全拉伸到视口（iPhone 6/7/8）。

更新

这是我的 HTML 标记，基本上是幻灯片中的 3 个图片元素。

这是我到目前为止添加的 css。

其他一切都由 splide 库设置，并且在桌面上完美运行。您也可以在这里访问该网站：https ://easy-loft.de

有人有想法吗？

我正在尝试使用 splidejs 滑块在右侧实现此数字分页，但无法做到。

到目前为止我所拥有的是这个。

这是我的自定义分页代码

我注意到当我有 2 个具有数据属性的滑块时我卡住了：data-slider以及一个options我想与每个滑块共享的对象。

next为&创建了自定义按钮，prev仅适用于第一个滑块。

我试图遍历所有滑块，但第二个滑块上的按钮导航将失败。

如何多次共享上一个和下一个按钮而不必为其指定唯一名称？

我希望能够一遍又一遍地重复使用相同的按钮。现在，我必须复制并更改按钮的名称。

有什么诀窍可以解决这个问题吗？

我的代码：

我在尝试使vue-splide在 之外工作时遇到问题nuxt dev，在生成静态或 spa 之后，它无法正常工作。

将目标nuxt.config.js从staticto更改SPA并不能解决问题。而不是使用nuxt generate我也尝试过nuxt build，结果是一样的。

两张图在这里：

可以看出，滑块仅在其中一个中起作用。

有什么帮助使它正常工作以便我可以部署站点吗？

nuxt.config.js

splide.client.js