carousel 相关问题

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

v-用于动态图像src

在 resources/images 目录中,我有 10 个图像,我想通过 vue3-carousel 库显示,图像名称是 1.jfif,2.jfif ..etc,但是属性绑定不能像这样工作,它给出

回答 1 投票 0

为什么我的动画状态在组件实例之间共享?

每当您与轮播的一次调用交互(即单击下一个或上一个)时,动画都会为组件的两个实例播放。这里有什么问题吗? 轮播组件.ts @成分({ 选择...

回答 1 投票 0

面临警告动画:未指定`useNativeDriver`。这是必需的选项,必须在 React Native 中显式设置为“true”或“false”

我正在使用 native-banner-carousel 在我的 React Native 项目中显示横幅图像。虽然它已经成功实施并且工作得很好,但我遇到了一个问题。每个...

回答 1 投票 0

无法获取在 CSS 轮播中使用的图像链接

我无法使某些图像链接在 CSS 轮播中工作。我认为大多数图像都阻止了图像链接,因为当我将图像链接移离

回答 1 投票 0

我的 bootstrap 5 轮播控件使我的复选框不起作用

我使用了一个 Bootstrap 轮播,里面有一个简单的表单。 问题是输入 :my_miss_france_guess 不起作用,因为我添加了引导轮播元素。 当我点击它时,它显示...

回答 1 投票 0

Angular 17导入Bootstrap 5轮播

我想在 Angular 组件中导入 BS 轮播,但它不起作用。 BS 样式导入得很好,因为我可以使用 BS 类。 我读了很多教程,所以我不明白我错过了什么。我看到了 ng-boot...

回答 1 投票 0

滑块无法使用 nextjs 和 tailwinds css 工作

“使用客户端”; 从“react”导入 React, { useState }; 常量文本数据 = [ { 编号: 1, text: "文本 1 描述", }, { 编号: 2, 文本:“文本 2

回答 1 投票 0

如何在Swiper JS中只为中间幻灯片启用中心幻灯片?

使用 Swiper JS 作为滑块,并且希望仅对中间幻灯片启用中心幻灯片,而不是对第一张和最后一张幻灯片启用中心幻灯片。是否有一种简单且可配置的方法来指定

回答 3 投票 0

Owl Carousel / ngx-owl-carousel-o 触摸拖动始终返回到第一张幻灯片

你好吗?希望你一切顺利。 我在 Angular 项目中使用 ngx-owl-carousel-o (Owl Carousel),当我从第一页触摸/拖动到第二页时,一切都正常。但问题是

回答 1 投票 0

如何使用react-native-reanimated-carousel在自动播放期间添加滚动延迟

我正在使用 React Native 复活的轮播。我的目的是在滚动到下一个项目之前延长查看每个渲染项目所花费的时间。就像自动播放延迟一样。这是代码: <

回答 1 投票 0

如何将变量传递给事件处理程序?

如果我的问题对于 JS 专家来说听起来微不足道,我深表歉意。 我创建了一个图像滑块(轮播),并且在加载缩略图时,我尝试创建对全尺寸图像的引用,以便当

回答 2 投票 0

Prime NG - 轮播导航指示器需要自定义点

我正在开发prime Ng Carousel,想要更改导航的点数。 如果有 6 张迷你卡,我需要 6 个点用于轮播。应显示至少 4 个迷你卡。 有没有办法开发...

回答 1 投票 0

如何用纯JS和CSS创建一个带触摸的无限轮播? [已关闭]

这是一个使用普通 JS 和 CSS 进行触摸的无限多项目图像轮播的示例。 没有依赖项,没有框架。

回答 1 投票 0

如何创建无限多项目图像轮播? (+ Touch 和所有 Plain Vanilla JS 和 CSS)[关闭]

如果不使用 jQuery 等外部库或 Angular 等框架,就能拥有一个具有无限效果的图片库,那就太棒了。一个普通的 JS 和 CSS,所以每个人都可以使用。 怎么办?

回答 1 投票 0

如何让我的引导轮播滑块一次移动一列?

对于我的项目,我有一个引导轮播。我在轮播项目中使用了四列。我使用三个滑块来适应三种不同的屏幕尺寸。我想每次点击时将幻灯片移动一列...

回答 1 投票 0

如何保持悬停时显示的图像特定信息始终显示在同一位置?

这就是我想要实现的目标 以及我遇到的问题 我正在使用这个 HTML: 我正在使用这个 HTML: <div class="timeline"> <div class="timeline-item"> <div class="thumbnail"> <img src="https://images.pexels.com/photos/2437286/pexels-photo-2437286.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Project 1"> <!-- Replace # with the actual image URL --> </div> <div class="info-box"> <h3>Project 1</h3> <p>Log-line: A captivating journey through time and space.</p> <h4>Credits:</h4> <ul> <li>Director: John Doe</li> <li>Producer: Jane Smith</li> <li>Editor: Alex Johnson</li> </ul> <div class="video-container"> <!-- Embedded video for the first film --> <iframe src="https://player.vimeo.com/video/387034973" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> </div> </div> </div> <div class="timeline-item"> <div class="thumbnail"> <img src="https://images.pexels.com/photos/288100/pexels-photo-288100.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Project 2"> <!-- Replace # with the actual image URL --> </div> <div class="info-box"> <h3>Project 2</h3> <p>Log-line: An epic tale of courage and sacrifice.</p> <h4>Credits:</h4> <ul> <li>Director: Sarah Johnson</li> <li>Producer: Michael Brown</li> <li>Editor: Emily Adams</li> </ul> <div class="video-container"> <!-- Embedded video for the second film --> <iframe src="https://player.vimeo.com/video/759472047" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> </div> </div> </div> </div> 还有这个CSS: /* Timeline layout */ .timeline { display: flex; /* Adjust other properties for the horizontal row */ } /* Adjust spacing between items */ .timeline-item { position: relative; margin-right: 10px; /* Remove spacing between items */ overflow: hidden; /* Ensure contents don't overflow */ } .thumbnail img { width: 100%; /* Ensure the thumbnail image fills its container */ } /* Initial hide for the info-box */ .info-box { display: none; /* Additional styling for the info box */ } /* Hover effect */ .timeline-item:hover .info-box { display: block; /* Other hover styles */ } 任何帮助都意义重大。我了解了基本原理,但仍然是新领域,并且渴望学习! 我尝试将信息卡分离到自己的 div 类中,以使它们独立于图像行,但没有取得任何成功。 /* Timeline layout */ .timeline { display: flex; position: relative; /* Adjust other properties for the horizontal row */ } /* Adjust spacing between items */ .timeline-item { margin-right: 10px; /* Remove spacing between items */ overflow: hidden; /* Ensure contents don't overflow */ } .thumbnail img { width: 100%; /* Ensure the thumbnail image fills its container */ } /* Initial hide for the info-box */ .info-box { display: none; /* Additional styling for the info box */ } /* Hover effect */ .timeline-item:hover .info-box { display: block; position: absolute; left: 0; /* Other hover styles */ } <div class="timeline"> <div class="timeline-item"> <div class="thumbnail"> <img src="https://images.pexels.com/photos/2437286/pexels-photo-2437286.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Project 1"> <!-- Replace # with the actual image URL --> </div> <div class="info-box"> <h3>Project 1</h3> <p>Log-line: A captivating journey through time and space.</p> <h4>Credits:</h4> <ul> <li>Director: John Doe</li> <li>Producer: Jane Smith</li> <li>Editor: Alex Johnson</li> </ul> <div class="video-container"> <!-- Embedded video for the first film --> <iframe src="https://player.vimeo.com/video/387034973" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> </div> </div> </div> <div class="timeline-item"> <div class="thumbnail"> <img src="https://images.pexels.com/photos/288100/pexels-photo-288100.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Project 2"> <!-- Replace # with the actual image URL --> </div> <div class="info-box"> <h3>Project 2</h3> <p>Log-line: An epic tale of courage and sacrifice.</p> <h4>Credits:</h4> <ul> <li>Director: Sarah Johnson</li> <li>Producer: Michael Brown</li> <li>Editor: Emily Adams</li> </ul> <div class="video-container"> <!-- Embedded video for the second film --> <iframe src="https://player.vimeo.com/video/759472047" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> </div> </div> </div> </div>

回答 1 投票 0

图像未在网页上加载

这是js代码 如果(滑块2){ 新的滑翔(滑块2,{ 类型:'轮播', 开始时间: 0, 悬停暂停:真, 预览:4、 动画持续时间:800,

回答 1 投票 0

导航栏 Z 索引不适用于 Alice Carousel

我有我的顺风商店导航栏和用于幻灯片更改的爱丽丝轮播,但桌面视图的下拉导航栏不会出现在爱丽丝轮播上方,它出现在爱丽丝轮播下方。 我...

回答 1 投票 0

手工旋转木马

我正在制作最简单的垂直轮播,带有上一个/下一个按钮。我快到了,但我还没有弄清楚以下内容: var ShortnewsblockHeight = $(".shortnewsblock").outerHeight(); 变种

回答 2 投票 0

Android ViewPager2 setPageMargin 未解决

我想使用 View Pager2 实现轮播,并预览左右页面,如下所示: 最初我使用的是支持的view pager1。现在我认为它已被删除 viewPagerhost.setPage...

回答 6 投票 0

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