Angular中Owl Carousel 2.0.7自定义导航按钮实现咨询

步骤1：获取Owl Carousel实例 #

在组件中声明变量存储轮播实例，待轮播初始化完成后赋值：

import { Component, AfterViewInit } from '@angular/core';
declare var $: any; // 确保项目已引入jQuery

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  private owlInstance: any;

  ngAfterViewInit(): void {
    // 初始化轮播并获取实例
    this.owlInstance = $('.your-carousel-selector').owlCarousel({
      nav: false, // 禁用默认导航（你已配置此项）
      loop: true,
      items: 1,
      // 其他轮播配置项
    }).data('owl.carousel');
  }
}

替换.your-carousel-selector为你实际的轮播容器选择器

步骤2：实现幻灯片切换方法 #

在组件中添加切换方法，调用Owl Carousel内置的API：

// 切换到上一张幻灯片
prevSlide(): void {
  this.owlInstance.prev();
}

// 切换到下一张幻灯片
nextSlide(): void {
  this.owlInstance.next();
}

步骤3：修正按钮事件绑定 #

你的按钮文本与绑定事件对应反了，建议调整为以下代码：

<div class="jo-carousel-custom-nav">
   <button (click)="prevSlide()">previous</button>
   <button (click)="nextSlide()">next</button>
</div>

额外注意事项 #

• 确保项目已正确引入资源，可在angular.json中配置：

  "styles": [
    "node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
    "node_modules/owl.carousel/dist/assets/owl.theme.default.min.css",
    "src/styles.css"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/owl.carousel/dist/owl.carousel.min.js"
  ]
  

• 若实例获取失败，检查选择器是否正确，或用setTimeout延迟初始化逻辑。

内容的提问来源于stack exchange，提问作者Azhar Parvaiz