carousel 相关问题

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

如何在此自动轮播滑块中显示当前图像下的下一张图像?

我正在尝试制作一个无限自动播放轮播,使用香草 JS 全屏显示。 我正在使用数组来存储图像。烦人的一点是,当图像幻灯片有一个简单的背景......

回答 0 投票 0

keen-slider react js 额外的点显示问题

有一个我无法解决的错误 keen-slider react js 中有一个错误,当没有更多的项目可以滑动但出现点时 有代码沙箱代码 https://codesandbox.io/s/quiet-fog-ekwqd?fil...

回答 1 投票 0

如何在轮播下添加下一个和上一个按钮?

我想添加一个下一个 - 上一个按钮到这个旋转木马。更好的是在旋转木马下面并以居中的风格。 谢谢你帮助我。 我想在这个旋转木马上添加一个下一个 - 上一个按钮。更好的是在旋转木马下方并采用居中样式。 谢谢你帮助我。 <section id="slider"> <input type="radio" name="slider" id="s1" /> <input type="radio" name="slider" id="s2" /> <input type="radio" name="slider" id="s3" checked /> <input type="radio" name="slider" id="s4" /> <input type="radio" name="slider" id="s5" /> <label for="s1" id="slide1"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label> <label for="s2" id="slide2"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label> <label for="s3" id="slide3"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label> <label for="s4" id="slide4"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label> <label for="s5" id="slide5"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label> </section> <style> [type=radio] { display: none; } #slider { height: 55vw; position: relative; perspective: 1000px; transform-style: preserve-3d; } #slider label { margin: auto; width: 80%; height: 80%; border-radius: 4px; position: absolute; left: 0; right: 0; cursor: pointer; transition: transform 0.4s ease; } #s1:checked ~ #slide4, #s2:checked ~ #slide5, #s3:checked ~ #slide1, #s4:checked ~ #slide2, #s5:checked ~ #slide3 { box-shadow: 0 1px 4px 0 rgba(0,0,0,.37); transform: translate3d(-30%,0,-200px); } #s1:checked ~ #slide5, #s2:checked ~ #slide1, #s3:checked ~ #slide2, #s4:checked ~ #slide3, #s5:checked ~ #slide4 { box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2); transform: translate3d(-15%,0,-100px); } #s1:checked ~ #slide1, #s2:checked ~ #slide2, #s3:checked ~ #slide3, #s4:checked ~ #slide4, #s5:checked ~ #slide5 { box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19); transform: translate3d(0,0,0); } #s1:checked ~ #slide2, #s2:checked ~ #slide3, #s3:checked ~ #slide4, #s4:checked ~ #slide5, #s5:checked ~ #slide1 { box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2); transform: translate3d(15%,0,-100px); } #s1:checked ~ #slide3, #s2:checked ~ #slide4, #s3:checked ~ #slide5, #s4:checked ~ #slide1, #s5:checked ~ #slide2 { box-shadow: 0 1px 4px 0 rgba(0,0,0,.37); transform: translate3d(30%,0,-200px); } #slide1 { background: #00BCD4 } #slide2 { background: #4CAF50 } #slide3 { background: #CDDC39 } #slide4 { background: #FFC107 } #slide5 { background: #FF5722 } </style>

回答 0 投票 0

猫头鹰轮播的问题是因为某些东西的链接不正确吗?

我正在尝试将 Owl Carousel 合并到我的最新项目中,但我似乎遇到了一些困难。在这一点上,只有 HTML 和 CSS 似乎可以正常运行......

回答 0 投票 0

清爽的图片轮播网站总是让我回到第一张图片

我正在使用 VSCode 设计一个简单的图像轮播,用作讲故事的演示。每张图片底部都有一个副标题,用于添加图片描述。本质上,它的两个车...

回答 0 投票 0

如何设置引导轮播?

我想从 bootstrap 添加一个旋转木马到我的页面,但它真的让我很难在每个屏幕上设置它,当它在移动设备上看起来不错然后在大屏幕上它会增加图像并削减边......

回答 0 投票 0

.NET MAUI CarouselView 更改位置在不滑动至少一次的情况下不起作用

我正在尝试使用 CarouselView 创建一个入职视图。我有一个位置指示器和一个按钮来更改轮播视图项目。当我按下按钮时,它应该显示下一个项目。

回答 2 投票 0

我需要帮助设计一个使用 css 网格的 React 应用程序

我有一个只有 3 个 jsx 文件的 React 应用程序,main.jsx、app.jsx 和 carousel.jsx 以及两个 CSS 文件 index.css 和 App.css。我只是将 Carousel 组件导入 app.jsx 和 putti ...

回答 0 投票 0

html网页中的多个轮播

我想在网页上一个接一个地显示多个产品的照片。每个产品都有一到四张图片。心中的布局是: 第一个产品的图像轮播 我的轮播...

回答 1 投票 0

使用原生 JavaScript、CSS 和 HTML 创建轮播

这是示例图像: 我正在尝试制作一个旋转木马,但我无法让它移动;我已经尝试使用特定或定义的数据,但它似乎不起作用。我试着制作箭头按钮和点

回答 2 投票 0

如何将这个“滚轮”事件用于触摸和/或拖动?

目前正在开发一个 Nuxt 3 应用程序,该应用程序包含一个轮播功能,目前仅适用于水平滚动。但是,我遇到了一个问题,只有用户可以...

回答 0 投票 0

使用 react-alice-carousel 创建居中旋转木马

我一整天都在努力用 react-alice-carousel 库创建一个居中的轮播,结果就是这些。链接到这里的图书馆 基本上我实现了 gif 上展示的结果

回答 1 投票 0

圆形图像在过渡时显示角然后立即再次变圆

我正在使用 Bootstrap 5.3,每当我的旋转木马出现过渡时,角就会显示出来,然后再次变圆。坦率地说,它在标题中。这确实是我的问题。 显示的内容...

回答 1 投票 0

使用 chakra ui 时如何将箭头保持在卡片的中心侧,并对带有卡片图像的箭头幻灯片做出反应?

我已经厌倦了 chakra ui mb,mt 选项,但它只是将箭头向上而不是它的图像

回答 0 投票 0

CanvasJS 图表宽度错误,直到调整窗口大小

我见过其他人有这个问题,但没有一个以解决方案结束。我正在构建一组图表以在轮播中循环,就 Chrome 调试器上的元素选项卡而言

回答 1 投票 0

如何在用户第一次滚动时动态调整旋转木马的大小?

在细节之前我想告诉我我正在使用带有 Tailwind CSS 的 Next js 并使用 Splide 库进行轮播。 问题: 我的 Next js 网站上有一个主轮播,当网站首先加载时......

回答 0 投票 0

如何根据响应变化改变 Angular Carousel 的“cellsToShow”

我正在为我的角度项目使用角度响应轮播。 ...

回答 1 投票 0

如何修复幻灯片?

我正在尝试在我的 index.html 上播放卡片幻灯片(轮播)。 我目前拥有的代码展示了所有五张垂直堆叠的卡片,带有不执行任何操作的可点击箭头。有谁知道...

回答 1 投票 0

Boostrap v5 旋转木马不滑动

当我单击下一张/上一张按钮时,轮播会淡入下一张幻灯片,即使我已经添加了“幻灯片”类。 当我点击下一张/上一张按钮时,轮播会淡入下一张幻灯片,即使我已经添加了“幻灯片”类。 <div id="testimonials-carousel" class="carousel slide" data-bs-ride="false"> <div class="carousel-inner"> <div class="carousel-item active" style="background-color: red;"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item" style="background-color: yellow;"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item" style="background-color: blue;"> <img src="..." class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#testimonials-carousel" 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="#testimonials-carousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> 我要幻灯片顺滑不褪色。你们能告诉我我做错了什么或指导我应该怎么做吗

回答 0 投票 0

wordpress rest api gallery images show flutter carousel slider only one image

” 尝试从帖子内容图像中获取图像以在旋转木马滑块中显示如何将图像列表转换为字符串以显示旋转木马滑块 最终列表文章; 诠释

回答 0 投票 0

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