carousel 相关问题

内容的旋转显示,可容纳各种内容,通常包括“下一个”和“前一个”按钮,以旋转内容。

如何使用 Business Manager 在 Salesforce Commerce Cloud 中实施轮播

我目前正在 Salesforce Commerce Cloud (SFCC) 中从事一个项目,需要在主页上实现轮播。我了解 SFCC 鼓励使用内容资产和插槽来添加

回答 1 投票 0

点击带灯箱的图像轮播,获取图像 URL,然后显示灯箱

我有一个 WordPress 网站,我在 Blocksy 主题中使用 elementor Image Carousel。这是我为图像选择的选项 链接 - 媒体文件 灯箱 - 是 当我点击图片时,

回答 1 投票 0

如何在响应式显示上使用光滑的轮播行和slidesPerRow?

我想要我的轮播项目符合以下条件: 上面的大型桌面上有 3 行和每行 3 张幻灯片。 2 行和 2 张幻灯片每行,小于 992 像素。 1 行和 1 张幻灯片每行小于 768 像素。 但它...

回答 1 投票 0

如何修改间隔速度?

这个问题是针对这个组件的:https://ant.design/components/carousel/#header 我尝试过 autoplayInterval={1000} 但没有成功。

回答 3 投票 0

如何在Flutter中创建swiper轮播?

如何使用 Flutter 创建类似于下图中的轮播滑块。 我尝试使用card_swiper,如下所示,但它看起来仍然不像图像。我希望有人能提供帮助。 @ov...

回答 1 投票 0

轮播滑动动画在 Bootstrap 4.5.2 上不起作用

我正在学习 Bootstrap (v4.5.2),想要创建一个简单的轮播,可以为我的网站自动滑动。我转到 Bootstrap 文档并复制了

回答 4 投票 0

在前一个轮播停止移动之前,无法在 DaisyUI 轮播之间交换

我在 React/Vite/Tailwind 项目中使用 DaisyUI 的轮播组件。当我向页面添加 2 个轮播时,您无法切换轮播(滚动浏览另一个),直到上一个轮播完成为止

回答 1 投票 0

React/Material-UI 库本身有图像轮播组件吗?

我正在React/Material-UI库中搜索图像滑块(轮播)组件,但我找不到其中的组件。请帮我找到图像滑块组件。

回答 3 投票 0

创建带有可点击指示器的无限滚动轮播

我正在尝试创建一个水平滚动的div,类似于轮播,包含多个可以从左向右滚动的卡片。滚动应该是无限的,这意味着一旦最后......

回答 1 投票 0

创建卡片轮播和使用溢出 CSS 属性时出现问题

我有一个卡片轮播。 .轮播{ 显示:柔性; 溢出:可见; 位置:相对; justify-content:flex-start; 宽度:100%; 边框半径:15px; 盒子阴影:...

回答 1 投票 0

轮播滑块错误'firstIndex == 0 || childScrollOffset(firstChild!)! - 滚动偏移<= precisionErrorTolerance

列( 孩子们: [ if (state.bumperBountyData.isNotEmpty) 轮播滑块( 项目:状态。

回答 1 投票 0

React Nuka 旋转木马垂直对齐幻灯片

我有一个轮播,其中包含带有图像的幻灯片,但幻灯片未垂直对齐。我通常使用 Flex-box 来对齐项目,但现在不可能了,因为图像处于嵌套结构中......

回答 3 投票 0

在响应断点处调整窗口大小时,文档滚动到光滑的轮播

我有以下巧妙的初始化代码。基本上这是两个同步块: 第一个是内容轮播,一次仅显示一个块。 第二个是菜单轮播,显示...

回答 1 投票 0

我可以在 Bootstrap 轮播幻灯片中添加包含多个图像的 div 吗?如果是这样,我该怎么做?

我的 HTML 页面上有一个轮播滑块,我想将其制作为每张幻灯片都是一个包含多个图像的 div,如下所示: 我已经尝试将其添加到...

回答 3 投票 0

Prime NG 轮播水平对齐项目

我有一个 Prime NG 轮播,以徽标(PNG)作为元素。这些标志的高度不一样。是否可以将这些徽标水平居中? Prime NG 轮播的行为是物品...

回答 1 投票 0

Swiper 9 Angular Ionic - 拇指旋转木马在循环打开时停止选择主幻灯片

这个问题使我能够发布经过多次实验后确定的答案,以防其他人遇到类似的问题,因为我没有发现它记录得这么好 - 任何改进......

回答 1 投票 0

如何在SwipeJS中让item中的文字悬浮在图片上方?

我正在尝试从 SwipeJS 演示页面复制此效果,其中文本漂浮在每张幻灯片中的图像底部,但不在图像之外。 我尝试过使用幻灯片内容,就像我在

回答 1 投票 0

如何在 SwiperJS 中向 3 个活动/可见/显示的幻灯片添加类名

所以基本上我在 Swiper 中有一个带有 slipsPerView={3} 的轮播。我想设置未显示的滑块的样式,因此我想向可见滑块添加一个 className,或者添加一个 class...

回答 1 投票 0

react-responsive-carousel:如何为拇指提供固定高度?

我给图像指定了固定的高度。但现在的问题是,高度也适用于拇指。 我怎样才能防止这种情况发生? {数据?.书?.

回答 2 投票 0

Bootstrap 5 Carousel 在页面加载后不会自动播放

这个标准 Bootstrap 5 轮播代码... 这个标准 Bootstrap 5 轮播代码... <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="1.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="2.jpg" class="d-block w-100" alt="..."> </div> </div> </div> ...页面加载时在 html 文件中自动播放。 但是,当页面加载后将相同的代码添加到 DOM 时: $('#previous-div').after(carouselHTML); ...轮播不会自动播放。 页面加载后将轮播添加到 DOM 时,我需要采取哪些步骤才能让轮播自动播放? 根据 docs,具有 data-bs 属性的 Carousel 组件会在页面加载时自动初始化,因此稍后添加它们将不起作用。 因此,您可以使用 JavaScript 手动实例化它。 您似乎使用的是 jQuery,因此 BS 组件自动可用,因此您可以通过将 cycle 传递给 .carousel 方法来实例化轮播: $('#previous-div').after($(carouselHTML).carousel('cycle')); 演示: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Bootstrap Example</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <div id="previous-div"></div> <script> $(document).ready(function() { const carouselHTML = ` <div id="carouselExampleSlidesOnly" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://placehold.co/300x200" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://placehold.co/300x200" class="d-block w-100" alt="..."> </div> </div> </div> `; $('#previous-div').delay(2000).after($(carouselHTML).carousel('cycle')); }); </script> </body> </html>

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.