carousel 相关问题

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

平滑全宽连续双见证滑块

我正在寻找类似于 https://userway.org/ 的推荐滑块。有人可以建议一下吗？或者指导我找到一个帖子（如果有的话）。谢谢你

jquery slider carousel bootstrap-5

回答 1 投票 0

带有集合视图 POD 的 Swift Carousel

所以我正在努力实现这样的目标：一个轮播，我可以向左和向右滑动，但我不确定如何实现这一点，我有一个集合视图，所有设置都带有水平向右滚动...

ios swift carousel

回答 3 投票 0

轮播视图 SwiftUI

如何实现swift的iCarousel框架中的Rotary类型的Carousel。以下是我想用 SwiftUI 实现的目标我检查了很多教程和框架...

ios swift swiftui carousel

回答 3 投票 0

Bootstrap 5 Carousel 滑动滑动与使用溢出的内部元素的交互中断？（垂直滚动会破坏从左到右的滑动）

找了一天了，网上好像没有人遇到这个问题。我有一个 Bootstrap 5 轮播，相对普通的设置，除了我删除了按钮以仅依靠滑动到导航...

javascript css carousel bootstrap-5

回答 1 投票 0

我的轮播无法正常工作，图像未显示在网站上

我从 getbootstrap.com 复制粘贴的轮播代码并更改了 id。然而它仍然不起作用。我想知道我哪里做错了，我应该改正什么？ &l... 我从 getbootstrap.com 复制粘贴的轮播代码并更改了 id。然而它仍然不起作用。我想知道我哪里做错了，我应该改正什么？ <div class="py-5"> <div class="container"> <div id="slide" class="carousel slide"> <div class="carousel-indicators"> <button type="button" data-bs-target="#slide" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" style="background: url(1.jpeg); height: 600px; background-size: cover"> <img src="" class="d-block w-100" alt="slide 1"> </div> <div class="carousel-item" style="background: url(2.jpeg); height: 600px; background-size: cover"> <img src="" class="d-block w-100" alt="slide 2"> </div> <div class="carousel-item" style="background: url(3.jpeg); height: 600px; background-size: cover"> <img src="" class="d-block w-100" alt="slide 3"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#slide" 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="#slide" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </button> </div> </div> </div> <script src="js/bootstrap.bundle.js"></script> 您需要使用 CDN 添加 bootstrap JS 和 Bootstrap CSS。您还需要添加图像 src，请参阅下面的示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <title>Document</title> </head> <body> <div class="py-5"> <div class="container"> <div id="slide" class="carousel slide"> <div class="carousel-indicators"> <button type="button" data-bs-target="#slide" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" style='height: 600px; background-size: cover'> <img src="https://m.media-amazon.com/images/I/71ex3MVOFHL._AC_SX679_.jpg" class="d-block w-100" alt="slide 1"> </div> <div class="carousel-item" style=" height: 600px; background-size: cover"> <img src="https://m.media-amazon.com/images/I/71auFznfVpL.__AC_SX300_SY300_QL70_ML2_.jpg" class="d-block w-100" alt="slide 2"> </div> <div class="carousel-item" style=" height: 600px; background-size: cover"> <img src="https://m.media-amazon.com/images/I/71ex3MVOFHL._AC_SX679_.jpg" class="d-block w-100" alt="slide 3"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#slide" 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="#slide" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </button> </div> </div> </div>  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script> </body> </html>

html css twitter-bootstrap carousel

回答 1 投票 0

在 Framer Motion 中如何消除 AnimatePresence 上的反弹？

在构建我的运动后使用 Framer Motion，我注意到当循环使用 AnimatePresence 时，div 会出现反弹。变种：常量变体 = { 输入：（{方向，宽度}...

carousel framer-motion chakra-ui

回答 1 投票 0

Reactjs 做了一个轮播，但图像拒绝显示

我用后台方法制作了简单的卡片就很好了。就像当我尝试绘制它时，突然之间图像不想显示为图片左侧所示。只有...

reactjs carousel

回答 1 投票 0

需要帮助找出为什么我的 Bootstrap 5.0 轮播无法工作

似乎无法弄清楚为什么当我单击箭头时我的轮播不会切换。谢谢大家的帮助！似乎无法弄清楚为什么当我单击箭头时我的轮播不会切换。感谢大家的帮助！ <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"> <div id="testimonial-carousel" class="carousel slide" data-bs-ride="false"> <div class="carousel-inner"> <div class="carousel-item active"> <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2> <img class="test-image" src="images/dog-img.jpg" alt="dog-profile"> <em>Pebbles, New York</em> </div> <div class="carousel-item"> <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2> <img class="test-image" src="images/lady-img.jpg" alt="lady-profile"> <em>Beverly, Illinois</em> </div> <a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 给你... 您还需要添加 Bootstrap JS，而不仅仅是 CSS。将 href="#testimonial-carousel" 更改为 data-bs-target="#testimonial-carousel"。将 data-slide="prev"（Bootstrap 4）更改为 data-bs-slide="prev"（Bootstrap 5），将 data-slide="next"（Bootstrap 4）更改为 data-bs-slide="next"（Bootstrap 5）。请参阅下面的片段。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="main.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </head> <body> <div id="testimonial-carousel" class="carousel slide" data-bs-ride="false"> <div class="carousel-inner"> <div class="carousel-item active"> <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2> <img class="test-image" src="https://images.pexels.com/photos/802112/pexels-photo-802112.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="dog-profile"> <em>Pebbles, New York</em> </div> <div class="carousel-item"> <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2> <img class="test-image" src="https://images.pexels.com/photos/802112/pexels-photo-802112.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="lady-profile"> <em>Beverly, Illinois</em> </div> <a class="carousel-control-prev" data-bs-target="#testimonial-carousel" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" data-bs-target="#testimonial-carousel" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </body> </html>

carousel bootstrap-5

回答 1 投票 0

滑动滑块过渡错误

我正在尝试使用 vueawesome slider （基于 swiper slider）制作滑块。我试图让它看起来像这样然而，由于某种原因，当滑动器从

javascript css vue.js carousel

回答 2 投票 0

v-用于动态图像src

在 resources/images 目录中，我有 10 个图像，我想通过 vue3-carousel 库显示，图像名称是 1.jfif，2.jfif ..etc，但是属性绑定不能像这样工作，它给出

laravel vue.js carousel

回答 1 投票 0

为什么我的动画状态在组件实例之间共享？

每当您与轮播的一次调用交互（即单击下一个或上一个）时，动画都会为组件的两个实例播放。这里有什么问题吗？轮播组件.ts @成分（{ 选择...