carousel 相关问题

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

构建具有 100vw 水平相邻部分的组件的正确 React 方法

我正在制作一个 React 应用程序，其中我的一个组件是另外两个组件的父组件，它们都被设置为水平相邻的 100vw 部分。一次只能看到一个部分，另一个是 cl...

reactjs react-hooks carousel

回答 0 投票 0

如何为 react-native-carousel 制作自定义点

我必须为轮播创建分页点，如下所示：活动点应为渐变色，非活动点应为灰色这是 active dot 的设计当用户开始滑动时，cur ...

react-native pagination carousel react-native-flatlist react-animated

回答 2 投票 0

后退按钮在 JavaScript 轮播中不起作用

我是一个使用 JavaScript 开发旋转木马的初学者，我有一个后退按钮，当我点击它时它不起作用。这是我用来处理按钮点击的 JavaScript 代码： ...

javascript carousel

回答 0 投票 0

Carousel css - 在中心旋转并拥有一个

旋转木马在框左侧某处旋转。如何在div的中心绕自己的轴旋转？ https://code pen.io/whiskaso/pen/zYmKBMQ 正在尝试使用所有值作为宽度，mar ...

html css rotation carousel

回答 1 投票 0

移动到下一张幻灯片时，如何让轮播上的视频停止

标题：使用 Bootstrap React 移动到下一张幻灯片时视频不会停止描述：我正在使用 Bootstrap React 库和 ReactPlayer 构建视频轮播。视频播放正常，但是...

reactjs carousel

回答 1 投票 0

bootstrap 4 轮播如何主动转换？

我有一个 bootstrap 4 旋转木马，每次我需要移动 4 张幻灯片。我正在使用这段代码： $(这个).旋转木马(4) 问题是轮播只是跳转到那个索引，没有显示任何传输......

javascript jquery css bootstrap-4 carousel

回答 1 投票 0

你能帮我看看旋转木马容器的高度吗

我的问题是关于 deaulted carousel height properties 我需要修复并且该容器中的图像或视频被调整为 object-fit:cover。我尝试了所有的 css propertis 但图像总是......

css reactjs carousel

回答 0 投票 0

尝试在 React Js 中创建轮播，但函数显示为未定义 no-undef

我正在尝试创建一个每 3 秒有三个循环背景图像的 div。现在，当我编写代码时，它向我显示了一个错误，显示 Line 13:3: 'startCarousel' is not defined no-undef

reactjs carousel background-image

回答 0 投票 0

Bootstrap v5 纯文本 Carousel 保持最大文本项的大小（响应式）

我正在开发 Bootstrap v5 纯文本轮播。我的文本项是动态填充的，我事先不知道它们的大小。我在 carousel-caption 元素中编码文本，并删除 img...

css carousel bootstrap-5

回答 0 投票 0

Flickity AsNavFor 在控制台中产生错误：“Uncaught TypeError: Cannot read properties of undefined (reading 'create')”

我使用 flickity 作为说明，但在控制台中收到此错误警告有人知道如何解决这个问题吗？这是当前的捆绑包 <p>我使用 flickity 作为说明，但在控制台中收到此错误警告有人知道如何解决这个问题吗？</p> <p><a href="https://i.stack.imgur.com/KwLp9.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL0t3THA5LnBuZw==" alt=""/></a></p> <p><a href="https://i.stack.imgur.com/oRFMl.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL29SRk1sLnBuZw==" alt=""/></a></p> <p>这是当前的捆绑包</p> <pre><code><script src="https://unpkg.com/flickity-as-nav-for@3/as-nav-for.js"></script> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> </code></pre> <p>我正在使用 flickity AsNavFor，但它在控制台中显示错误，我该如何摆脱或解决它？</p> <p>需要类型 <a href="https://i.stack.imgur.com/d2OMW.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL2QyT01XLnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>更改<pre><code>script</code></pre>标签的顺序：</p> <pre><code><script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> <script src="https://unpkg.com/flickity-as-nav-for@3/as-nav-for.js"></script> <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> </code></pre> </answer> <answer tick="false" vote="0"> <p>我有同样的问题。这就是为我修复它的原因。</p> <p>换出：<pre><code><script src="https://unpkg.com/flickity-as-nav-for@3/as-nav-for.js"></script></code></pre></p> <p>与：<pre><code><script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script></code></pre></p> </answer> </body></html>

javascript laravel slider carousel flickity

回答 0 投票 0

如何使 Bootstrap v5.0 Carousel slider all images 等高

我正在尝试使用 Bootstrap v5.0 Carousel 创建一个滑块。我对滑块图像有一些疑问。图片的高度不相等。那看起来滑块丑陋。我正在尝试使用 Bootstrap v5.0 Carousel 创建一个滑块。我对滑块图像有一些疑问。图片的高度不相等。看起来滑块很丑。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Carousel</title> </head> <body> <div class="bg-light"> <div class="container"> <div class="carousel slide" id="carousel1" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="./images/slider 00.jpg" class="d-block w-100 h-100"> </div> <div class="carousel-item"> <img src="./images/slider 01.jpg" class="d-block w-100 h-100"> </div> <div class="carousel-item"> <img src="./images/slider 02.jpg" class="d-block w-100 h-100"> </div> <div class="carousel-item"> <img src="./images/slider 03.jpg" class="d-block w-100 h-100"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carousel1" data-bs-slide= prev> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carousel1" data-bs-slide= next> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> </body> </html> 我怎样才能让它们都一样高？我尝试使用 CSS img 高度 height: x px; 但它看起来很难看。我该如何解决这个问题？您可以在此选择器中使用固定高度.carousel-inner div .carousel-inner div { height: 400px; object-fit: cover; } .carousel-inner div { height: 400px; object-fit: cover; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Carousel</title> </head> <body> <div class="bg-light"> <div class="container"> <div class="carousel slide" id="carousel1" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class="d-block w-100 h-100"> </div> <div class="carousel-item"> <img src="https://neilpatel.com/wp-content/uploads/2017/09/image-editing-tools.jpg" class="d-block w-100 h-100"> </div> <div class="carousel-item"> <img src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" class="d-block w-100 h-100"> </div> <div class="carousel-item"> <img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg" class="d-block w-100 h-100"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carousel1" data-bs-slide= prev> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carousel1" data-bs-slide= next> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> </body> </html> 由于一次只显示两张幻灯片，javascript 解决方案不可避免地需要切换显示以读出图像尺寸，这很可能会导致回流。那么，为什么不寻求服务器端解决方案呢？当然，您也可以将相同的模式应用于客户端逻辑。所以，想法是确定最高图像的纵横比，然后将其应用于所有项目。通过将宽高比应用于 svg 并将其包装在显示网格容器中，可以实现自然调整大小。这是在 wordpress 上下文中的一个实现： <?php global $wp_query; $max = array_reduce($wp_query->posts, function($result, $post) use ($size) { list($src, $width, $height) = wp_get_attachment_image_src($post->ID, $size, false); if ($width * $height > $result['width'] * $result['height']) { $result['width'] = $width; $result['height'] = $height; } return $result; }, [ 'width' => 0, 'height' => 0 ]); $greatestCommonDivisor = static function($width, $height) use (&$greatestCommonDivisor) { return ($width % $height) ? $greatestCommonDivisor($height, $width % $height) : $height; }; $divisor = $greatestCommonDivisor($max['width'], $max['height']); $ratio_x = $max['width'] / $divisor; $ratio_y = $max['height'] / $divisor; ?> <div id="<?= $id ?>-carousel" <?php if (get_theme_mod('carousel_colorscheme') !== 'dark'): ?> data-bs-theme="dark" <?php endif; ?> class="carousel slide h-100" data-bs-ride="false" data-bs-interval="<?= !$autoplay ? 'false' : $interval; ?>" > <div class="carousel-indicators" data-control> <?php while( have_posts()) : the_post() ?> <button data-bs-target="#<?= $id ?>-carousel" data-bs-slide-to="<?= $wp_query->current_post; ?>" class="<?= $wp_query->current_post === 0 ? 'active' : '' ?>" ></button> <?php endwhile; ?> </div> <div class="carousel-inner h-100"> <?php while( have_posts()) : the_post() ?> <div class="carousel-item h-100<?= $wp_query->current_post === 0 ? ' active' : '' ?>"> <div style="display: grid;"> <svg viewBox="0 0 <?= $ratio_x ?> <?= $ratio_y ?>" style="grid-area: 1 / 1 / 2 / 2;"></svg> <div class="w-100 h-100" style="grid-area: 1 / 1 / 2 / 2;"> <?= wp_get_attachment_image($post->ID, $size, false, [ 'class' => "img-fluid m-0 w-100 h-100", 'style' => "object-fit: contain; object-position: center", 'loading' => 'lazy' ]); ?> <?php if ($caption = wp_get_attachment_caption()): ?> <div class="carousel-caption d-none"> <?= $caption ?> </div> <?php endif; ?> </div> </div> </div> <?php endwhile; ?> </div> <button class="carousel-control-prev" type="button" data-bs-target="#<?= $id ?>-carousel" data-bs-slide="prev" data-control> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#<?= $id ?>-carousel" data-bs-slide="next" data-control> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>

html css twitter-bootstrap carousel

回答 2 投票 0

iOS 上的 Bug Carousel Bootstrap 5.3

我有一个 bootstrap 5.3 的转盘，我使用类“rounded-4”来圆转转盘的角。在每台电脑和手机上，旋转木马都是完美的，但在 iOS 上，圆角是 b...

html ios carousel bootstrap-5 rounded-corners

回答 0 投票 0

如何在 Bootstrap 5 的轮播中显示上一张和下一张图片的预览

我希望轮播中的上一张和下一张图像对于每个中心图像都部分显示，例如这这是代码。我希望轮播中的上一张和下一张图像对于每个中心图像都部分显示，例如这个这是代码。 <div class="carousel-container"> <div id="carouselExampleRide" class="carousel slide" data-bs-ride="true"> <div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> </div> <div class="carousel-item active"> <img src="https://static.wixstatic.com/media/84b06e_4ae660d38c134d9f8c291148c8e378a4~mv2.png/v1/fit/w_1000%2Ch_608%2Cal_c%2Cq_80,enc_auto/file.jpg" class="d-block w-100 carousel-img-one" alt="fitness"> </div> <div class="carousel-item"> <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/447dee40e57ab139592d58c4a61cf9b28297bb9c0b945568da9f7122e1e6fe861623238414909.jpg" class="d-block w-100" alt="fashion"> </div> <div class="carousel-item"> <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/0ef3b30526d23fee95381bf1b179d129f82c5b30220823b9855b2776e095de701623242117925.jpg" class="d-block w-100 img-fluid" alt="art"> </div> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> .carousel-container { margin: auto; width: 50%; } .carousel-control-prev, .carousel-control-next { margin: -150px !important; } 谢谢这是 Bootstrap 5 的代码片段： codepen 示例你可以在https://jsfiddle.net/q9ewyd1L/9/上看到直播 <div class="carousel-container"> <div id="carouselExample" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://static.wixstatic.com/media/84b06e_4ae660d38c134d9f8c291148c8e378a4~mv2.png/v1/fit/w_1000%2Ch_608%2Cal_c%2Cq_80,enc_auto/file.jpg" class="d-block w-100" alt="fitness"> </div> <div class="carousel-item"> <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/447dee40e57ab139592d58c4a61cf9b28297bb9c0b945568da9f7122e1e6fe861623238414909.jpg" class="d-block w-100" alt="fashion"> </div> <div class="carousel-item"> <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/0ef3b30526d23fee95381bf1b179d129f82c5b30220823b9855b2776e095de701623242117925.jpg" class="d-block w-100" alt="art"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> .carousel-container { margin: auto; width: 80%; } .carousel-item { position: relative; } .carousel-item.active img { width: 100%; } .carousel-item:not(.active) img { width: 80%; position: absolute; top: 0; left: 10%; opacity: 0.5; transition: all 0.3s ease; } .carousel-item:not(.active) img:hover { width: 90%; left: 5%; opacity: 0.8; cursor: pointer; }

html css twitter-bootstrap-3 carousel bootstrap-5

回答 2 投票 0

刷新后在同一张幻灯片上保留轮播图像

我有一个简单的 html 图像轮播用作讲故事的演示。每当我点击刷新按钮时，它总是让我回到第一张图片。

local-storage carousel page-refresh

回答 0 投票 0

轮播索引

所以我在做一个旋转木马，我遇到了我无法弄清楚的问题。在第一次迭代中，它确实创造了奇迹，但遗憾的是，没有处理 outindexing。我认为这很容易：转...

javascript html carousel

回答 1 投票 0

我正在使用 react-responsive-carousel 但它不能与 NextJs 中的 SSR 一起使用？您有在此组件中启用 SSR 的示例吗？

我目前在做一个电商项目，有需求通过SSR拉取商品详情数据并渲染到屏幕上。虽然数据显示正确，但我遇到了问题