carousel 相关问题

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

如何停止 element 或 carousel 响应?

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

启用无箭头的 mat-tab 滚动

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

回答 2 投票 0

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

我正在使用 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>

回答 1 投票 0

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

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

回答 1 投票 0

与 p-carousel PrimeNG 对齐错误

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

回答 1 投票 0

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

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

回答 1 投票 0

视频和图像轮播

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

使用 Polylang 插件时不显示轮播

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

回答 4 投票 0

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

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

回答 1 投票 0

.NET MAUI 中的 UI 轮播视图

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

自定义箭头反应光滑

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

回答 13 投票 0

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

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

回答 1 投票 0

Javascript 问题:我无法将主页中的图像与图库页面的轮播链接起来

我是一名初学者,寻求帮助。 我试图找出一个特定的轮播。 我的index.html 页面自动仅显示图库的前三张图像。 我希望当我们点击 o...

回答 1 投票 0

如何用Jetpack compose实现轮播(卡片滑块)?

我一直在使用这个库在View系统中实现轮播。 如何在 Jetpack Compose 中实现轮播?

回答 3 投票 0

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