carousel 相关问题

如何让图像淡入和淡出，而不仅仅是在 javascript 轮播中出现一次？

我想创建一个淡入/淡出轮播。一切正常，但图像立即出现而不是淡入 // 用于淡入淡出轮播的 JavaScript const Slides = document.querySelectorAll('.

幻灯片/轮播指示器

我努力不来这里打扰你们，但我就是不知道将这些小幻灯片指示器合并到我的代码中。我已经看了太多教程，但无法弄清楚...

vue-tiny-slider：未捕获（承诺中）类型错误：t2 不是函数

我使用Vue 3。我安装了vue-tiny-slider https://github.com/viktorlarsson/vue-tiny-slider，但它显示错误“t2不是函数”。该文档没有涵盖 Vue 3 的设置，所以我...

我的幻灯片轮播无法工作，我希望它能够手动工作吗？

我想创建一个轮播，我的图像位置很好，但我的轮播没有手动使用提供的箭头，可能有一些CSS属性缺少我的代码。不知道有没有...

Carousel primevue 宽度减小

第一张幻灯片的宽度正常，但后续图片的宽度越来越小。 有人知道为什么吗？ 这是我的代码。 ... 第一张幻灯片的宽度正常，但后续图片的宽度越来越小。 有人知道为什么吗？ 这是我的代码。 <div class="col-12 md:col-6 overflow-hidden"> <Carousel :value="products" :numVisible="1" :numScroll="1" circular :responsiveOptions="carouselResponsiveOptions" :autoplayInterval="1000" :showNavigators="false"> <template #item="product"> <img :src="'demo/images/product/' + product.data.image" :alt="product.data.name" class="md:ml-auto block md:h-full" /> </template> </Carousel> </div> <script setup> import ProductService from '@/service/ProductService'; import PhotoService from '@/service/PhotoService'; import { ref, onMounted } from 'vue'; const products = ref([]); const images = ref([]); const carouselResponsiveOptions = ref([ { breakpoint: '1024px', numVisible: 3, numScroll: 3 }, { breakpoint: '768px', numVisible: 2, numScroll: 2 }, { breakpoint: '1020px', numVisible: 1, numScroll: 1 } ]); const productService = new ProductService(); const photoService = new PhotoService(); onMounted(() => { productService.getProductsSmall().then((data) => (products.value = data)); photoService.getImages().then((data) => (images.value = data)); }); </script> 我在Carousel prime vue width returns中发现了同样的问题，但仍然不知道如何解决。 任何建议将不胜感激。 您的图像必须是 width: 100% 才能使 carousel 正常工作，我尝试了没有 100% 宽度的不同方法，但轮播无法正常工作。 <Carousel :value="images" :numVisible="3" :numScroll="1" circular :autoplayInterval="1000" :responsiveOptions="carouselResponsiveOptions" > <template #item="slotProps"> <div class="carousel-data"> <img :src="slotProps.data.src" alt=""> </div> </template> </Carousel> <script setup> import {ref} from 'vue'; const images = ref(Array(10).fill({src: 'img/icons/android-chrome-512x512.png'})); const carouselResponsiveOptions = ref([ {breakpoint: '1024px', numVisible: 2, numScroll: 1}, {breakpoint: '768px', numVisible: 1, numScroll: 1}, ]); </script> <style> img { display: block; width: 100%; height: auto; margin: auto; } <style> 希望这对您有帮助。

我需要使用 Fotorama 旋转木马将图像居中

我正在使用 Fotorama 轮播，现在图像在顶部对齐。 我尝试通过添加以下内容来添加我的CSS： 保证金：0 自动； 但它不起作用。 检查我的网站，看起来它正在对齐所有...

如何创建包含多个项目（如所附图像）的轮播？

有没有任何库可以创建这样的轮播？我尝试过react-native-snap-carousel，但它没有这个功能。 我也尝试过react-native-reanimated-carousel，但是...

为什么当我为轮播添加样式时我的菜单消失了？

我尝试创建两个 CSS 文件，但它不起作用。我在下面加入了我的代码、HTML、标题 CSS 和 Carousel CSS 以及 javascript，以创建响应式标题。 从我发送的屏幕截图可以...

我创建了一个网站菜单，并尝试创建一个轮播，当我使用 CSS 设置轮播样式时，菜单消失了？我需要一些帮助谢谢

我尝试创建两个 CSS 文件，但它不起作用。我在下面加入了我的代码、HTML、标题 CSS 和 Carousel CSS 以及 javascript，以创建响应式标题。 从我发送的屏幕截图可以...

使用营销 API 创建轮播广告时创意和目标不匹配

我正在通过营销 API 创建轮播广告。在广告创建过程中，Facebook 出现“创意与目标不匹配”错误。但是，Campaign 和 Adset 已成功创建。 我变了...

为什么我的 Angular 应用程序中会出现“ExpressionChangedAfterItHasBeenCheckedError”？

我刚刚做了一个类似轮播的组件，我将它用作父组件中的子组件，并传递给它一个 Observable。这是代码，首先是孩子： 我刚刚做了一个类似轮播的组件，我将它用作父组件中的子组件，并传递给它一个 Observable。这是代码，首先是孩子： <div #container *ngIf="name && (carouselData$ | async) as data" class="viewport-container"> <h5>{{name}}</h5> <cdk-virtual-scroll-viewport orientation="horizontal" [itemSize]="container.offsetWidth/itemsPerPage" [minBufferPx]="container.offsetWidth*2" [maxBufferPx]="container.offsetWidth*2" [ngStyle]="{'min-height': ((container.offsetWidth / itemsPerPage) * (16 / 9)) + 'px'}" class="viewport"> <mat-grid-list gutterSize="13" [ngStyle] ="{'width': (container.offsetWidth/itemsPerPage)*data.results.length +'px'}" rowHeight="9:16" [cols]="data.results.length" > <mat-grid-tile *cdkVirtualFor="let item of data.results"> <img src="https://images.org/{{item.image_path}}" alt="..."> </mat-grid-tile> </mat-grid-list> </cdk-virtual-scroll-viewport> <button mat-icon-button color="primary" aria-label="Previous Page" (click)="scroll('start')"> <mat-icon>navigate_before</mat-icon> </button> <button mat-icon-button color="primary" aria-label="Next Page" (click)="scroll('end')"> <mat-icon>navigate_next</mat-icon> </button> </div> 上面组件的.ts： export class CarouselComponent implements OnInit { constructor(private breakpoint$: BreakpointObserver) { } @ViewChild(CdkVirtualScrollViewport) viewPort!: CdkVirtualScrollViewport; @Input() name!: string; @Input() carouselData$!: Observable<any>; itemsPerPage = 0; ngOnInit(): void { this.setItemsPerPage(); } scroll(direction: string) { const currentOffset = this.viewPort.measureScrollOffset(); const pageSize = this.viewPort.elementRef.nativeElement.offsetWidth; const itemSize = pageSize/this.itemsPerPage; let offsetDelta = 0; switch (direction) { case 'start': offsetDelta = -pageSize + (itemSize - (currentOffset % itemSize)); break; case 'end': offsetDelta = pageSize - (currentOffset % itemSize); break; } if (currentOffset % itemSize === 0 && direction === 'start') { offsetDelta = -pageSize; } const newOffset = currentOffset + offsetDelta; this.viewPort.scrollToOffset(newOffset, 'smooth'); } setItemsPerPage() { this.breakpoint$.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large ]).subscribe(result => { if (result.matches) { if (result.breakpoints[Breakpoints.XSmall]) { this.itemsPerPage = 2; } if (result.breakpoints[Breakpoints.Small]) { this.itemsPerPage = 3; } if (result.breakpoints[Breakpoints.Medium]) { this.itemsPerPage = 4; } if (result.breakpoints[Breakpoints.Large]) { this.itemsPerPage = 6; } } }); } } 及其父级： <div> <app-carousel [name]="itemsData.name" [carouselData$]="itemsData.items$"></app-carouasel> </div> 父.ts： export class ParentComponent implements OnInit { constructor(private itemsService: ItemsService) { } itemsData: any = { name: 'Trending', items$: undefined }; ngOnInit(): void { this.getData(); } getData(){ this.itemsData.items$ = this.itemsService.getItemsData(); } } 我试图在每次到达断点时检测更改，但它不起作用（你必须注入这个东西：ChangeDetectorRef） setItemsPerPage() { this.breakpoint$.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large ]).subscribe(result => { if (result.matches) { if (result.breakpoints[Breakpoints.XSmall]) { this.itemsPerPage = 2; } if (result.breakpoints[Breakpoints.Small]) { this.itemsPerPage = 3; } if (result.breakpoints[Breakpoints.Medium]) { this.itemsPerPage = 4; } if (result.breakpoints[Breakpoints.Large]) { this.itemsPerPage = 6; } // Manually trigger change detection this.cdr.detectChanges(); } }); } 错误是： ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '285.5'. Current value: '278'.. Find more at https://angular.io/errors/NG0100 at throwErrorIfNoChangesMode (core.mjs:7940:1) at bindingUpdated (core.mjs:12832:1) at Module.ɵɵproperty (core.mjs:14565:1) at CarouselComponent_div_0_Template (carousel.component.html:3:57) at executeTemplate (core.mjs:9717:1) at refreshView (core.mjs:9580:1) at refreshEmbeddedViews (core.mjs:10731:1) at refreshView (core.mjs:9604:1) at refreshComponent (core.mjs:10777:1) at refreshChildComponents (core.mjs:9376:1) 此外，尝试更多的事情，我变得像无限循环的变化检测，但我不确定。帮忙！！！ 我从您的代码中看到了一些事情，您应该在这里尝试： 为 itemsPerPage 设置默认值，以避免在第一个更改检测周期期间出现错误。如果什么都没有，则设置为零。 将 setItemsPerPage 逻辑移至 ngAfterViewInit。也将其导入 顶部。应该是这样的。 ngAfterViewInit(): void { this.setItemsPerPage(); } 尝试一下，看看错误是否仍然出现。

平滑全宽连续双见证滑块

我正在寻找类似于 https://userway.org/ 的推荐滑块。 有人可以建议一下吗？ 或者指导我找到一个帖子（如果有的话）。 谢谢你

带有集合视图 POD 的 Swift Carousel

所以我正在努力实现这样的目标： 一个轮播，我可以向左和向右滑动，但我不确定如何实现这一点，我有一个集合视图，所有设置都带有水平向右滚动...

轮播视图 SwiftUI

如何实现swift的iCarousel框架中的Rotary类型的Carousel。以下是我想用 SwiftUI 实现的目标 我检查了很多教程和框架...

Bootstrap 5 Carousel 滑动滑动与使用溢出的内部元素的交互中断？ （垂直滚动会破坏从左到右的滑动）

找了一天了，网上好像没有人遇到这个问题。我有一个 Bootstrap 5 轮播，相对普通的设置，除了我删除了按钮以仅依靠滑动到导航...

我的轮播无法正常工作，图像未显示在网站上

我从 getbootstrap.com 复制粘贴的轮播代码并更改了 id。然而它仍然不起作用。我想知道我哪里做错了，我应该改正什么？ &l... 我从 getbootstrap.com 复制粘贴的轮播代码并更改了 id。然而它仍然不起作用。我想知道我哪里做错了，我应该改正什么？ <div class="py-5"> <div class="container"> <div id="slide" class="carousel slide"> <div class="carousel-indicators"> <button type="button" data-bs-target="#slide" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" style="background: url(1.jpeg); height: 600px; background-size: cover"> <img src="" class="d-block w-100" alt="slide 1"> </div> <div class="carousel-item" style="background: url(2.jpeg); height: 600px; background-size: cover"> <img src="" class="d-block w-100" alt="slide 2"> </div> <div class="carousel-item" style="background: url(3.jpeg); height: 600px; background-size: cover"> <img src="" class="d-block w-100" alt="slide 3"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#slide" 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="#slide" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </button> </div> </div> </div> <script src="js/bootstrap.bundle.js"></script> 您需要使用 CDN 添加 bootstrap JS 和 Bootstrap CSS。您还需要添加图像 src，请参阅下面的示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <title>Document</title> </head> <body> <div class="py-5"> <div class="container"> <div id="slide" class="carousel slide"> <div class="carousel-indicators"> <button type="button" data-bs-target="#slide" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#slide" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" style='height: 600px; background-size: cover'> <img src="https://m.media-amazon.com/images/I/71ex3MVOFHL._AC_SX679_.jpg" class="d-block w-100" alt="slide 1"> </div> <div class="carousel-item" style=" height: 600px; background-size: cover"> <img src="https://m.media-amazon.com/images/I/71auFznfVpL.__AC_SX300_SY300_QL70_ML2_.jpg" class="d-block w-100" alt="slide 2"> </div> <div class="carousel-item" style=" height: 600px; background-size: cover"> <img src="https://m.media-amazon.com/images/I/71ex3MVOFHL._AC_SX679_.jpg" class="d-block w-100" alt="slide 3"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#slide" 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="#slide" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </button> </div> </div> </div> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script> </body> </html>

在 Framer Motion 中如何消除 AnimatePresence 上的反弹？

在构建我的运动后使用 Framer Motion，我注意到当循环使用 AnimatePresence 时，div 会出现反弹。 变种： 常量变体 = { 输入：（{方向，宽度}...

Reactjs 做了一个轮播，但图像拒绝显示

我用后台方法制作了简单的卡片就很好了。就像当我尝试绘制它时，突然之间图像不想显示为图片左侧所示。只有...

需要帮助找出为什么我的 Bootstrap 5.0 轮播无法工作

似乎无法弄清楚为什么当我单击箭头时我的轮播不会切换。 谢谢大家的帮助！ 似乎无法弄清楚为什么当我单击箭头时我的轮播不会切换。 感谢大家的帮助！ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <div id="testimonial-carousel" class="carousel slide" data-bs-ride="false"> <div class="carousel-inner"> <div class="carousel-item active"> <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2> <img class="test-image" src="images/dog-img.jpg" alt="dog-profile"> <em>Pebbles, New York</em> </div> <div class="carousel-item"> <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2> <img class="test-image" src="images/lady-img.jpg" alt="lady-profile"> <em>Beverly, Illinois</em> </div> <a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 给你... 您还需要添加 Bootstrap JS，而不仅仅是 CSS。 将 href="#testimonial-carousel" 更改为 data-bs-target="#testimonial-carousel"。 将 data-slide="prev"（Bootstrap 4）更改为 data-bs-slide="prev"（Bootstrap 5），将 data-slide="next"（Bootstrap 4）更改为 data-bs-slide="next"（Bootstrap 5）。 请参阅下面的片段。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="main.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </head> <body> <div id="testimonial-carousel" class="carousel slide" data-bs-ride="false"> <div class="carousel-inner"> <div class="carousel-item active"> <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2> <img class="test-image" src="https://images.pexels.com/photos/802112/pexels-photo-802112.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="dog-profile"> <em>Pebbles, New York</em> </div> <div class="carousel-item"> <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2> <img class="test-image" src="https://images.pexels.com/photos/802112/pexels-photo-802112.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="lady-profile"> <em>Beverly, Illinois</em> </div> <a class="carousel-control-prev" data-bs-target="#testimonial-carousel" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" data-bs-target="#testimonial-carousel" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </body> </html>

滑动滑块过渡错误

我正在尝试使用 vueawesome slider （基于 swiper slider）制作滑块。我试图让它看起来像这样 然而，由于某种原因，当滑动器从