问题标签 [bootstrap-carousel]

我使用 Bootstrap 3 创建了一个轮播。我试图从 H1 标签中提取文本以成为上一个/下一个箭头。例如：如果幻灯片 2 是活动幻灯片，则上一个箭头应显示“幻灯片 1”，下一个箭头应显示“幻灯片 3”，而不是显示箭头图标。依此类推，在幻灯片中循环。

这是我的通用轮播代码。我想使用 jQuery 设置此功能并使其成为动态的，以便将来如果我添加更多幻灯片，它将获取新的 h1 标签。

这是我关于 stackoverflow 的第一个问题，因为我真的无法在其他地方找到解决方案。我真的希望任何技术天才可以在这里帮助我。

我目前正在创建一个类似 instagram 的网站，其中加载了很多图像。有些是单个图像，有些是多个图像，它们使用 Bootstrap 的轮播展示。到目前为止，除了高度之外，一切都很好。现在我正在将.item类硬编码为 的高度750px，这就是我想要的最大高度。但是任何低于此高度的图像都会在容器的顶部和底部创建一个空白区域。我想知道是否有检测每组图像的最大高度，并将高度应用于其容器。我尝试使用 jQuery 来选择每个图像集的图像最大高度，但我没有得到任何正确的值。或者，有没有更好的方法来解决这个问题？

我想要的是短图像在其容器中仅占据它们的短高度。如果一组图像具有不同的高度，则将最大图像高度设置为容器的高度。抱歉，如果我造成任何混乱，但我希望我的问题很清楚。谢谢！

这是我的 HTML 代码的一部分：

CSS：

注意：我使用绝对位置来防止不同高度的图像在彼此之间滑动时上下反弹。上、右、下、左用于全方位裁剪大于 750 像素的图像，而不是仅从底部裁剪。.item 是为每个图像设置高度的部分。但它必须取实际值，如果我设置为 auto 或 %，则不会出现图像。

那么如何根据每个集合中图像的最大高度将不同的 px 附加到“.item”类？

如果我使用 jQuery 来查找每个图像集的最大高度，它会及时调整每个图像集的容器高度吗？我的意思是因为它们有很多图像。即使我这样做$(document).ready(function)，一旦这些图像加载到浏览器中，它是否会有效地进行调整？如果没有，我可以知道是否有其他选择可以解决我的问题？

任何帮助都感激不尽！

首先，我创建了一个虚拟轮播（轮播元素），然后对其进行初始化

现在，我遇到了如果窗口宽度小于 480 则删除该轮播（#first-carousel'）的场景。

如何删除引导轮播？试图检查它的文档，但似乎没有像破坏或删除功能或任何相关的东西。试过了

但似乎不起作用，而是给了我这个错误

bootstrap.min.js:6 Uncaught TypeError: Cannot read property 'offsetWidth' of undefined at c.slide (bootstrap.min.js:6) at c.next (bootstrap.min.js:6) at e (jquery.min .js:2)

任何帮助，想法？

我正在制作一个旋转木马，但我遇到了一个小故障，以前从未有过。当它滑到下一个项目上时，进来的内容与底部对齐，然后当它完全进入视口时，它就会出现。无法弄清楚我在这方面的错误。另外，如果有人能说出为什么会这样，那也将不胜感激

这是我的 CSS

我对html非常陌生，技能非常有限，所以请多多包涵。

我正在尝试在我的网站首页上放置一个带有链接的无限图像轮播。但是 Bootstrap 会覆盖我的网页样式。我以为我知道我的样式在哪里（我显然不知道）并尝试在轮播之后添加它们，但它没有用。

我需要页面上特定位置的轮播。

我尝试将旋转木马放在桌子上或添加等（几乎我能想到的任何东西）都是徒劳的。不知道该怎么做，因为我远不是一个主要的代码编写者......任何对此的帮助将不胜感激！！！

先感谢您！！！

这是网站。您不必访问该站点，所有内容都写在这里。它是使用旧的 wordpress 主题的 wordpress，我无法修改它以使图像看起来像带有缩略图的幻灯片。我可以访问页眉和页脚来编写所需的 css 和 javascript，但是很难找到哪个函数正在回显图像并手动编写类。我可以使用 jquery 编辑类

所以我举了这个例子

并像这样修改它，假设我只有图像，我想使用 jquery 构建其余部分

如您所见，我到了那里，我不知道在 for 循环中放入什么来生成缩略图和轮播指示器。我希望我没有遗漏任何东西。

我正在利用标准引导方法来启动模态并在模态中显示轮播。

因此，根据他们使用哪个按钮触发模态，我希望轮播幻灯片有所不同。

下面是到目前为止的代码，但我无法使用 data-slide-to 来选择模态中的幻灯片。

页面按钮：

模态：

我有 Bootstrap Carousel，如下所示

它按原样工作得很好，但是当我删除最后一项并且数据以它自己为目标时，轮播控制不起作用。这里可能是什么问题，请帮助？谢谢....

它按原样工作得很好，但是当我删除最后一项并且数据以它自己为目标时，轮播控制不起作用。这里可能是什么问题，请帮助？谢谢....

所以问题是这样的，我用 bootstrap 做了一个轮播，我只是把 bootstrap.js 放在了 javascript 上。但是为什么幻灯片轮播不起作用？而如果我放 jquery，那么它可以工作！bootstrap.js 文件中没有javascript来调用轮播吗？任何解决方案？我想在不使用 jquery.js 的情况下使用 bootstrap.js 创建轮播

我很难弄清楚如何做我想做的事，所以我想我会解释我想要什么，并提供说明我的问题的代码笔。

我想要的是：

一个轮播，有各种幻灯片，夹在中间的静态图像上。考虑 3 层——1 层是背景，2 层是中间的人（模型），3 层是前景元素。我希望幻灯片包含 bg 和 fg，但模型保持静止。随着幻灯片的移动，它基本上只改变了背景和前景元素。

问题：

因为我不精通 z-index 层次结构，所以我不确定如何完成我想要的。因为滑块需要我将第二层分解为父元素，所以它不会在幻灯片之间进行动画处理，所以当幻灯片出现时，它们会根据它们的容器进行分层，但它们仍然位于模型后面。我一生都无法弄清楚如何在每张幻灯片的元素之间放置模型。

这个例子：

https://codepen.io/jrhager84/pen/wrvErb

编码：

HTML

CSS

提前感谢您的帮助，如果有什么我可以添加到这将有助于促进答案，请告诉我。^_^