carousel 相关问题

如何创建带有模糊非焦点元素的 Swiper JS、HTML CSS 轮播？

我正在尝试在网络上重现这段设计。 但我不确定实现这一目标的最佳解决方案是什么。我需要在 WordPress 中开发它。我为其他人尝试了一个很好的解决方案

Flutter：当我尝试热重载来运行应用程序时，在使用轮播滑块时出现此错误“错误：无法解析包'carousel_slider”

我一直在使用列表视图来显示我的图像，一切正常，但是当我尝试切换到轮播滑块包时，在安装它的那一刻，我收到了这些错误 正在启动 lib\main...

如何停止 element 或 carousel 响应？

我制作了一个带有 html 代码的轮播，但每次我调整屏幕大小时，它都会更改这些元素的大小。我希望它不要这样做。 这是它的预览及其工作原理：https://

如何让这个无限轮播发挥作用？

我有这个轮播，需要一个简单的操作：显示无限。问题在于动画被切断并在最后一个元素的末尾留下空白。我留下下面的代码然后...

带有淡入淡出效果的 CSS 图像滑块轮播 - 如何获得正确的计时？

我正在尝试使用 CSS 创建一个图像轮播，其中每个图像出现四秒钟，然后交叉淡入淡出到下一个图像。我想包含三个循环图像。 我在另一篇文章中找到了代码

启用无箭头的 mat-tab 滚动

我愿意在移动设备上复制可用手指滚动的选项卡，例如Google页面： 但是使用 mat-tab（材料设计和角度），我显示了两个箭头： 我设法删除了箭头......

轮播项目未显示在移动视图上

我正在使用 boostrap Carousel，我在笔记本电脑视图中的图像上放置了一些项目，它看起来很完美，但在移动视图上项目没有显示 这是笔记本电脑视图 这是移动视图 我正在使用 boostrap Carousel，我在笔记本电脑视图中的图像上放置了一些项目，它看起来很完美，但在移动视图上项目没有显示 这是笔记本电脑视图 这是手机视图 <section class="hero-wrap"> <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1"></li> <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/bg_1.jpg" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block"> <div class="overlay"></div> <div class="container"> <div class="row slider-text "> <div class="col-md-10 ftco-animate text-center"> <br><br> <div class="icon"> <span class="flaticon-lotus"></span> </div> <h1>Spa &amp; Beauty Center</h1> <div class="row justify-content-center"> <div class="col-md-7 mb-3"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> </div> </div> <p> <a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a> <a href="booking.php" class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a> </p> </div> </div> </div> </div> </div> <div class="carousel-item"> <img src="images/bg_2.jpg" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block"> <div class="overlay"></div> <div class="container"> <div class="row slider-text"> <div class="col-md-10 ftco-animate text-center"> <div class="icon"> <span class="flaticon-lotus"></span> </div> <h1>Spa &amp; Beauty Center</h1> <div class="row justify-content-center"> <div class="col-md-7 mb-3"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> </div> </div> <p> <a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a> <a href="booking.php" class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a> </p> </div> </div> </div> </div> </div> <div class="carousel-item"> <img src="images/bg_3.jpg" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block"> <div class="overlay"></div> <div class="container"> <div class="row slider-text"> <div class="col-md-10 ftco-animate text-center"> <div class="icon"> <span class="flaticon-lotus"></span> </div> <h1>Spa &amp; Beauty Center</h1> <div class="row justify-content-center"> <div class="col-md-7 mb-3"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> </div> </div> <p> <a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a> <a href="booking.php" class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a> </p> </div> </div> </div> </div> </div> </div> </div> </section> And css code is .carousel-item { height: 100vh; min-height: 300px; background: no-repeat scroll center scroll; \--webkit-background-size: cover; background-size: cover; } .carousel-item::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #000; opacity: 0.1; } .carousel-caption{ bottom:75px; padding-left:200px; padding-right:50px; } @media (max-width: 600px) { .carousel-item { height: 0; min-height: 270px; } } 我正在使用 boostrap Carousel，我在笔记本电脑视图中的图像上放置了一些项目，它看起来很完美，但在移动视图上项目没有显示 这是笔记本电脑视图 这是手机视图 这是因为 Bootstrap 将 .d-none 类显示为 none（带有 !important）。如果您想覆盖 Bootstrap 并在小屏幕中显示它，请使用内联 css（在 HTML 中）。然后，您还需要为小屏幕添加相应的样式（减小按钮的大小..） .carousel-item { height: 100vh; min-height: 300px; background: no-repeat scroll center scroll; /* --webkit-background-size: cover; */ background-size: cover; } .carousel-item::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #000; opacity: 0.1; } .carousel-caption{ bottom:75px; padding-left:200px; padding-right:50px; } @media (max-width: 600px) { .carousel-item { height: 0; min-height: 270px; } } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <section class="hero-wrap"> <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1"></li> <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://picsum.photos" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block" style="display:block !important;"> <div class="overlay"></div> <div class="container"> <div class="row slider-text "> <div class="col-md-10 ftco-animate text-center"> <br><br> <div class="icon"> <span class="flaticon-lotus"></span> </div> <h1>Spa &amp; Beauty Center</h1> <div class="row justify-content-center"> <div class="col-md-7 mb-3"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> </div> </div> <p> <a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a> <a href="booking.php" class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a> </p> </div> </div> </div> </div> </div> <div class="carousel-item"> <img src="https://picsum.photos/id/237/200/300" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block" style="display:block !important;"> <div class="overlay"></div> <div class="container"> <div class="row slider-text"> <div class="col-md-10 ftco-animate text-center"> <div class="icon"> <span class="flaticon-lotus"></span> </div> <h1>Spa &amp; Beauty Center</h1> <div class="row justify-content-center"> <div class="col-md-7 mb-3"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> </div> </div> <p> <a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a> <a href="booking.php" class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a> </p> </div> </div> </div> </div> </div> <div class="carousel-item"> <img src="https://picsum.photos/seed/picsum/200/300" class="d-block w-100" alt=""> <div class="carousel-caption d-none d-md-block" style="display:block !important;"> <div class="overlay"></div> <div class="container"> <div class="row slider-text"> <div class="col-md-10 ftco-animate text-center"> <div class="icon"> <span class="flaticon-lotus"></span> </div> <h1>Spa &amp; Beauty Center</h1> <div class="row justify-content-center"> <div class="col-md-7 mb-3"> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p> </div> </div> <p> <a href="pricing.php" class="btn btn-primary p-3 px-5 py-4 mr-md-2">Prices</a> <a href="booking.php" class="btn btn-outline-primary p-3 px-5 py-4 ml-md-2">Booking</a> </p> </div> </div> </div> </div> </div> </div> </div> </section> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

在轮播组件上应用 css 过渡时出现问题

我正在尝试构建一个具有覆盖流效果的轮播。我正在屏幕中渲染三个项目，循环遍历项目列表直到重新启动。我遇到的问题是过渡我...

与 p-carousel PrimeNG 对齐错误

我正在使用 Angular PrimeNG 编写一些代码，但在使用 p-carousel 时遇到了问题。问题是，正如你所看到的，标题没有很好地居中对齐，比它需要的位置稍微高了一点。

React 响应式轮播将指示器更改为矩形的全宽

我试图使指示器看起来是矩形并根据图像长度覆盖整个宽度，如下图所示： 虽然问题似乎是这样，但我不能把 div、side b...

视频和图像轮播

这里是一个编码菜鸟:)我有带有图像和视频的光滑滑块图像轮播。 由于某种原因，视频仅在设置为自动播放时才会播放。我无法控制使其播放？ 这是我的...

Elementor 推荐轮播无法正常工作..？

Elementor 推荐轮播无法正常工作，不显示滑块点，只显示一条评论 我添加了 3 条评论，但只显示一条。而不是其他样式工作。 输入图像描述...

使用原生 JavaScript、CSS 和 HTML 创建无限轮播循环

我正在尝试创建一个无限轮播，但后退按钮有问题，当我将卡片从位置 1 克隆到卡片 5 时，它会这样做，但它在克隆之前显示位置 1 的卡片...

使用 Polylang 插件时不显示轮播

我在我的 WordPress 网站上使用了 Polylang 插件，该网站有英语和阿拉伯语两种语言。我在一页中有一个轮播，在英文页面中运行得很好。 Ar 上同样的轮播...

滑块在带有打字稿的react-slick中不起作用

我正在使用react-slick库的typescript版本（@types/react-slick）在Nextjs项目中实现轮播/滑块。导入 Slider 组件后出现以下错误...

.NET MAUI 中的 UI 轮播视图

参考截图作为参考，我坚持这个设计。我应该如何在.NET MAUI 中设计它？毛伊岛应该有单个项目的样本作为轮播视图。并且截图显示了mu...

如何使用 JavaScript 将触摸滑块捕捉到滚动位置？

我正在创建一家商店，我想在我的登陆页面上创建一个包含产品的支持触摸的滑块/轮播（如移动设备 https://www.nike.com/es 上的滑块/轮播）。 我创建了一个溢出的容器（.

SAP Spartacus 轮播支持移动设备滑动吗？

使用 SAP Spartacus Storefront 轮播组件，左右滑动不起作用，无法导航轮播中的产品。我找不到任何提到这个库的文档...

自定义箭头反应光滑

我正在使用react-slick在我的项目中创建一个轮播。 我已经阅读了文档并尝试了不同的方法，但找不到一种方法来完全按照我需要的方式自定义它......有人吗......

将主页中的图像与图库页面的轮播链接

我是一名初学者，寻求帮助。 我尝试构建一个特定的轮播。 我的index.html 页面仅显示图库的前三张图像。 我希望当我们点击一张特定图像时...