carousel 相关问题

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

Bootstrap 5 视频轮播缺少“下一步”或“>”按钮？

我正在尝试使用 w3schools 的这个示例在 Bootstrap 5 中创建视频轮播，并用一些在线 Facebook 视频的链接替换图像。似乎工作正常，除了“n...

css bootstrap-5 carousel slideshow

回答 1 投票 0

通过HTML、CSS和纯JS创建轮播幻灯片时如何更改第一张图片和最后一张图片的动画

我已经实现了一个基本的图像轮播（类似于这个例子）。但是，当从第一张幻灯片循环到最后一张幻灯片时，我遇到了转换问题，反之亦然。而不是 sm...

javascript html css carousel

回答 1 投票 0

Flutter CarouselView 和带有 CarouselController 的指示器

我正在尝试使用 CarouselView 实现轮播指示器，但我无法获取当前索引。我的代码如下：类 WelcomeScreen 扩展 ConsumerStatefulWidget { 常量

flutter carousel flutter-material

回答 1 投票 0

react.js antd 轮播点在 SlidesToShow={cards amount} 时不可见

我在轮播中有不同数量的卡片，具体取决于屏幕分辨率。当我输入 SlidesToShow={cards amount} 时，点不可见，它们就消失了。目前我的卡数量 = 4 我...

javascript reactjs carousel antd

回答 1 投票 0

使图片轮播响应式

我在我的网站上使用了在互联网上找到的图片轮播，但我很难使其响应。以下是示例项目的 Codepen 链接：我正在我的网站上使用在互联网上找到的图片轮播，但我很难使其响应。这是示例项目的 Codepen 链接： <https://codepen.io/RaduBratan/pen/dyGEzay> 它在电脑屏幕上看起来很棒，这显然是为了电脑屏幕而设计的，但我显然希望它也能在手机上运行！我一直在使用媒体查询来重新排列较小屏幕的对象，但我无法完全弄清楚如何获得它。我想要的是顶部的文字，下面的图片，以及底部的导航箭头。关于如何做到这一点有任何提示吗？尽管我尽了最大努力，我还是不知道如何获得底部的导航箭头，因此 JS 脚本生成的背景颜色也没有完全贯穿图片后面。非常感谢任何可以给予指点的人。不用说，我对此很陌生;-) 我更喜欢你使用带有响应式的 Swiper 或 Slick 滑块这将解决你的问题 https://kenwheeler.github.io/slick/ https://swiperjs.com/demos

css carousel

回答 1 投票 0

Flowbite 轮播仅显示在页面上重新加载

我正在使用 Tailwind CSS 开发一个 React 项目。对于轮播要求，我们使用 Flowbite。从他们的示例中添加示例轮播代码时，它不起作用。当页面重新加载时...

reactjs carousel tailwind-css flowbite

回答 3 投票 0

Embla 轮播 Vue3 滚动下一个活动

我希望在我的 Vue 项目中设置 Embla Carousel，但我无法让 scrollNext 函数工作。这就是我所在的地方：从 'vue' 导入 { onMounted } 导入emblaCarous...</desc> <question vote="0"> <div> </div> <p>我希望在我的 Vue 项目中设置 Embla Carousel，但我无法让 <pre><code>scrollNext</code></pre> 功能正常工作。</p> <p>我在这里：</p> <pre><code><script setup> import { onMounted } from 'vue' import emblaCarouselVue from 'embla-carousel-vue' import Autoplay from 'embla-carousel-autoplay' const [emblaRef, emblaApi] = emblaCarouselVue({ loop: true }, [Autoplay()]) function prevSlide () { emblaApi.value.scrollPrev() } function nextSlide () { emblaApi.value.scrollNext() } </script> </code></pre> <pre><code><template> <div class="embla" ref="emblaRef"> <div class="embla__viewport"> <div class="embla__container"> <div class="embla__slide"> <div class="embla__parallax"> <div class="embla__parallax__layer"> <img class="embla__slide__img embla__parallax__img" src="https://picsum.photos/1000/350?v=1" alt="Your alt text" /> </div> </div> </div> ... <button @click="prevSlide">Prev</button> <button @click="nextSlide">Next</button> </code></pre> <p>您可以使用<a href="https://stackblitz.com/edit/vitejs-vite-ogbbrlqt?file=src%2Fcomponents%2FCarousel.vue" rel="nofollow noreferrer">此代码和框</a>查看项目。理想的解决方案将允许我利用 <a href="https://www.embla-carousel.com/examples/predefined/#parallax" rel="nofollow noreferrer">视差效果</a>，如 embla 文档中所示。</p> </question> <answer tick="false" vote="0"> <p>Embla 期望根的第一个子元素保存幻灯片。由于您在根和容器之间添加了 <pre><code>div.embla__viewport</code></pre>，因此您必须通过 <a href="https://www.embla-carousel.com/api/options/#container" rel="nofollow noreferrer"><pre><code>container</code></pre></a> 选项告诉 Embla：</p> <pre><code>const [emblaRef, emblaApi] = emblaCarouselVue({ loop: true, container: '.embla__container', // <----- use custom container }, [Autoplay()]); </code></pre> <hr/> <p>视差效果不是内置的，您必须使用示例中的代码和样式（请参阅其 <pre>sandbox</pre> 中的 <pre><code>css/embla.css</code></pre> 和 <a href="https://codesandbox.io/p/sandbox/embla-carousel-parallax-vanilla-hmjg6j?file=%2Fsrc%2Fjs%2FEmblaCarouselTweenParallax.js%3A1%2C1-68%2C1" rel="nofollow noreferrer"><code>js/EmblaCarouselTweenParallax.js</code></a>）。</p> <hr/> <p>这是更新后的 <a href="https://stackblitz.com/edit/vitejs-vite-uk4k5wwm?file=src%2Fcomponents%2FCarousel.vue" rel="nofollow noreferrer">stackblitz</a>。</p> <p>变化：</p> <ul> <li>添加了 <pre><code>container</code></pre> 选项，如上所述</li> <li>删除组件CSS</li> <li>添加文件<pre><code>embla.css</code></pre>（从示例沙箱复制）</li> <li>添加文件<pre><code>composables/emblaParallax.js</code></pre>（从示例沙箱复制） <ul> <li>包装初始化函数以消除卸载时的视差</li> </ul> </li> <li>称为“useEmblaParallax()<pre><code>in</code></pre>Carousel.vue`</li> </ul> </answer> </body></html>

javascript vue.js vuejs3 carousel embla-carousel

回答 0 投票 0

如何自定义猫头鹰轮播滑块

我已将猫头鹰旋转木马 2（最新更新）添加到我的主题中。我已成功添加轮播。但是，我无法控制自定义它。我尝试过编辑 owl-carousel.js ...

php css twitter-bootstrap carousel owl-carousel

回答 2 投票 0

如何更改 CarouselView 中的 CurrentItem？

我对 MAUI 应用程序相当陌生，我拥有的是绑定到学生集合的 CarouselView。一切工作正常，但是我有一个似乎很普遍的问题 - 我有一个下一个......

xaml maui carousel currentitem

回答 1 投票 0

android 撰写轮播，如何在使用 HorizontalUncontainedCarousel 时应用英雄策略（居中）轮播

在material3指南中，他们提到了英雄策略（居中）轮播，并提供了使用视图（XML）的详细示例 https://github.com/material-components/material-components-android/blob/...