我正在使用Angular 17和ngx-owl-carousel-0:17.0.0包.
我将我的定制选项设置为:
customOptions: OwlOptions = {
loop: true,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
navSpeed: 700,
margin:10,
navText: ["<", ">"],
responsive: {
0: {
items: 1
},
400: {
items: 2
},
760: {
items: 3
},
1000: {
items: 4
}
},
nav: true
}
目前,在我的页面中,我有默认模板:
<owl-carousel-o [options]="customOptions">
<ng-template carouselSlide>
<div class="slide">
<img src="https://via.placeholder.com/600/92c952" alt="img 1" />
</div>
</ng-template>
<ng-template carouselSlide>
<div class="slide">
<img src="https://via.placeholder.com/600/771796" alt="img 2" />
</div>
</ng-template>
<ng-template carouselSlide>
<div class="slide">
<img src="https://via.placeholder.com/600/24f355" alt="img 3" />
</div>
</ng-template>
<ng-template carouselSlide>
<div class="slide">
<img src="https://via.placeholder.com/600/d32776" alt="img 4" />
</div>
</ng-template>
<ng-template carouselSlide>
<div class="slide">
<img src="https://via.placeholder.com/600/f66b97" alt="img 5" />
</div>
</ng-template>
<ng-template carouselSlide>
<div class="slide">
<img src="https://via.placeholder.com/600/56a8c2" alt="img 6" />
</div>
</ng-template>
</owl-carousel-o>
这是我的输出.您可以看到 carousel 底部的导航按钮,虽然不是世界末日,但我似乎无法将它们放在 carousel 本身的左右位置.
在我的Angular.json文件中,我有:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
"node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js"
]