angular中使用 owl-carousel-o

最新推荐文章于 2025-05-01 08:38:22 发布

元宵不吃汤圆

最新推荐文章于 2025-05-01 08:38:22 发布

阅读量236

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_41844140/article/details/129953079

版权

文章展示了如何使用OwlCarousel2库创建一个响应式的图片滑动展示，通过Angular的*ngFor指令动态渲染内容，并配置了不同的屏幕尺寸下的items数量，支持鼠标拖动和多点触控，提供了导航点和自动宽度调整功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo: https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

<owl-carousel-o [options]="customOptions">
		<ng-container *ngFor="let item of data">
				<ng-template carouselSlide [id]="item.id" [width]="280">
						{{item}}
				</ng-template>
		</ng-container>
</owl-carousel-o>

customOptions = {
			margin: 20,
			loop: false,
			mouseDrag: true,
			touchDrag: false,
			pullDrag: false,
			dots: true,
			navSpeed: 800,
			items: 5,
			autoWidth: true,
			responsive: {
				300: {
					items: 1,
				},
				600: {
					items: 2,
				},
				900: {
					items: 3,
				},
				1180: {
					items: 4,
				},
				1400: {
					items: 5,
				},
			},
}