carousel 相关问题

我想要我的旋转木马项目至少有 5 张卡片。但每个轮播项目中只有一张卡片。我应该怎么办。： {%知识中的知识%} 我希望我的旋转木马项目至少有 5 张卡片。但每个轮播项目中只有一张卡片。我该怎么办: {% for knowledge in knowledges %} <div class="carousel-inner"> {% for photo in photo01s|slice:":5" %} <div class="carousel-item {% if forloop.first %}active{% endif %}"> <div class="row"> {% if photo.category01 == knowledge %} <div class="card" style="background-image: url('{{ photo.image01.url }}');"></div> {% endif %} </div> </div> {% endfor %} </div> {% endfor %} 我尝试了多种方法，但都不起作用。假设您想要每个知识 5 张照片，并假设每个知识您有超过 5 张照片： 1）类轮播-for循环外的内层 2）现在你将在轮播中每个知识至少有5张照片 <div class="carousel-inner"> {% for knowledge in knowledges %} {% set count = 0 %} {% for photo in photo01s %} {% if photo.category01 == knowledge %} {% set count = count + 1 %} <div class="carousel-item {% if forloop.first %}active{% endif %}"> <div class="row"> <div class="card" style="background-image: url('{{ photo.image01.url }}');"></div> </div> </div> {% endif %} {% endfor %} {% endfor %} </div> 你应该迭代knowledges，并在每个知识中迭代相应的照片，直到你至少有5张卡片，所以： <div class="carousel-inner"> {% for knowledge in knowledges %} <div class="carousel-item {% if forloop.first %}active{% endif %}"> <div class="row"> {% assign count = 0 %} {% for photo in photo01s %} {% if count < 5 and photo.category01 == knowledge %} <div class="card" style="background-image: url('{{ photo.image01.url }}');"></div> {% assign count = count | plus: 1 %} {% endif %} {% endfor %} </div> </div> {% endfor %} </div> 现在它将循环遍历每个知识，然后在每个知识内，它将循环遍历照片，直到找到 5 张卡片。

html django carousel bootstrap-5

回答 2 投票 0

轮播在卡片和模态中具有相同的img

我在两张单独的卡片中创建了一个模态。其中一个模态包含 Card，另一个模态包含 Caousel。在打开的页面上，它显示相同的照片，尽管 src 值不同。我怎样才能...

html image carousel bootstrap-5 card

回答 1 投票 0

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

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

javascript carousel swiper.js

回答 3 投票 0

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

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

flutter dart package carousel pubspec

回答 1 投票 0

如何停止 element 或 carousel 响应？

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

wordpress carousel elementor

回答 1 投票 0

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

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

html css reactjs carousel infinite-carousel

回答 1 投票 0

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

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

html css slider css-animations carousel

回答 1 投票 0

启用无箭头的 mat-tab 滚动

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

angular material-design carousel 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 & 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 & 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 & 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 & 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 & 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 & 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>

html css bootstrap-4 carousel

回答 1 投票 0

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

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

css reactjs tailwind-css carousel

回答 1 投票 0

与 p-carousel PrimeNG 对齐错误

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

html angular carousel primeng

回答 1 投票 0

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

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