问题标签 [bootstrap-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 投票
2 回答
1274 浏览

php - 在 Wordpress 中的循环内创建循环以显示 12 个帖子,每组两个帖子包含在单独的 div 中

我希望你们中的一位 Wordpress 大师可以在这里帮助我。

我正在尝试在一个循环中创建一个循环,该循环在 6 行中显示 12 个帖子。在每一行中,您有 2 个 div。每个 div 旨在显示一个帖子标题。循环遍历所有 12 个帖子并将它们正确分组 - 6 个 div,2 个帖子。每个帖子都有自己独特的标题。

我设法让循环将 12 个帖子分解为 6 ​​个 div,每个 div 里面都有两个内部 div。但我无法让内部 div 循环浏览所有帖子。相反,他们只是循环通过前两个。

所以我最终得到的是 6 行,每行有两个 div。但只有前两个帖子在所有行中不断重复出现。我在这里做错了什么?

任何帮助将不胜感激!

干杯,桑尼

0 投票
1 回答
3147 浏览

jquery - Bootstrap 3: Full Slider not working. Uncaught TypeError: $(...).carousel is not a function

I am creating a homepage following the template on this website: https://startbootstrap.com/template-overviews/full-slider/ but I cannot get it to work properly. I am able to load all my images but when I preview the page the headers for each image are overlapping, the buttons are not working and the pictures are not displaying correctly (I see my first picture, then the footer and then my other two pictures are right after the footer).

Here's the for my index:

and here's my slider inside the :

after the footer I have the following jquery function for the slider:

Here's my starter-template CSS:

and here's the full-slider CSS:

I have checked the console and I get this error: Uncaught TypeError: $(...).carousel is not a function. I am trying for a solution but nothing seems to be working, yet.

0 投票
1 回答
249 浏览

javascript - 单击后如何从左右轮播箭头中移除焦点?

这是一个非常有趣的问题。

在下图中,有左右轮播箭头。每个项目下都有一个文本框,用户可以在其中键入名称。如果用户单击左箭头或右箭头,然后,如果他单击任何输入文本框并单击左,则控件仍保留在左箭头和右箭头上。我不能在输入文本框上向左走。

我希望我已经尝试解释这个问题。单击左/右箭头后,我无法控制文本框。由于公司的政策,我无法向您展示代码。任何形式的帮助表示赞赏。

提前致谢!!!

在此处输入图像描述

0 投票
2 回答
2874 浏览

html - 引导轮播动画

我正在尝试向引导轮播添加一些简单的动画。代码如下:

我想做的是在 10 秒内使活动幻灯片从 1 缩放到 1.5。CSS如下:

我知道 HTML 和 CSS 是正确的。但是当页面加载时,出现的第一张幻灯片不会缩放,但是一旦更改了该幻灯片,其余的就可以正常工作了。即使我再次回到第一张幻灯片,它也会再次起作用。我需要的是在第一次加载时修复第一张幻灯片的动画。

0 投票
2 回答
1724 浏览

jquery - 如何在一行中显示更多轮播?

我想建立一个图片库。每张图片将代表一组图像。我有点意识到一个很好的解决方案是这样的:每个图像都会触发一个模态,在一个模态内部,我会在显示其他图像的地方放置轮播。但是我遇到了一个问题,我无法使轮播正常工作(它们嵌入在一行中)。请查看 jsfiddle 了解更多信息: https ://jsfiddle.net/r0ukv00d/4/

0 投票
3 回答
1677 浏览

html - 引导轮播在 Chrome 和 Opera 中没有响应

我有一个问题,在调整窗口大小时,Bootstrap 轮播会在轮播内拉伸或挤压我的图像。即使宽度和高度属性与图像的大小匹配,它也会垂直拉伸我的图像。

min-width: 100%;我在没有运气的情况下尝试了所有关于 SO 的答案,例如设置.carousel img课程等等。我的代码直接来自 Bootstrap 网站,我注意到其中的图像做了同样的事情。

奇怪的是,它可以完美地调整到 Edge 和 Firefox 中的窗口大小。轮播中的图像看起来和预期的一样,但在 Chrome 和 Opera 中打开会产生完全不同的东西。

任何帮助表示赞赏。

在此处输入图像描述

0 投票
0 回答
461 浏览

angular - carousel angular2 不从本地磁盘加载图像

我正在尝试使用本地磁盘中的图像将轮播组件添加到我的页面

我确定图像路径,这方面没有问题。加载页面时,图像不显示。相反,如果我对来自网络的图像使用相同的代码,一切都会正确加载

项目结构

如果我打开 URL http://localhost:49863/app/app.component.html,图像加载正确,但页面设计当然不正确

0 投票
1 回答
506 浏览

jquery - 引导轮播在 mvc 应用程序中不起作用

我收到的错误是 JavaScript 运行时错误:无法获取未定义或空引用的属性“offsetWidth”。

这里我使用的是 bootstarp.js 和 jquery.js,我无法找到 offsetWidth 的使用位置。请在上面的代码中找到异常发生的位置。

0 投票
1 回答
12603 浏览

css - Bootstrap 4 Alpha 6 垂直轮播

我正在尝试在 Bootstrap 4 Alpha 6 中创建一个垂直方向的轮播。我仍然无法弄清楚为什么 Bootstrap 的人不包括这个方向,但我已经接近了我的解决方案自己的。我似乎在我的 CSS 中遗漏了一些东西,但似乎无法放置它。

在JSFIDDLE上查看我的演示

我的问题是旋转木马幻灯片的非向上流体运动。幻灯片从底部升起,但在结束时不会继续向上 - 而是消失。

我正在通过编译使用 BS3 执行此操作的旧方法并尝试尽可能匹配新的 CSS 类来构建此代码。这是我的代码,对于解决这个谜团的任何帮助将不胜感激。

HTML

CSS

因此,与其让轮播幻灯片闪烁或消失,然后重新出现,我希望它们自然地向上流动,就好像隐藏的图像没有像 Bootstrap 中的默认设置那样保持对齐。

提前致谢!!!

0 投票
2 回答
5017 浏览

html - Bootstrap Carousel 活动类不改变

我创建了一个引导轮播,单击指示器会更改当前幻灯片,但不会将幻灯片的类更改为活动状态,这意味着指示器永远不会改变。

和CSS:

活动指示器应该是唯一被填充的指示器,其余的应该是空的,这不会发生,因为活动的列表项类在被点击后没有改变。