如何在 angular 8 版本中将 owl-carousel 位置放在滑块的左侧/右侧？

问题描述

在我的项目中，我需要使用滑块。为此，我找到了 owl-carousel 并将其集成到我的 angular 项目中。并尝试将滑块的下一个箭头和上一个箭头放在滑块的左侧和右侧。但无法从 app.component.scss 文件更改 css 样式。如何更改箭头的位置？

这是我的 app-component.ts 文件

import { Component } from '@angular/core';
import {OwlOptions} from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
export class AppComponent {
  customOptions: OwlOptions = {
    loop: true,mouseDrag: true,touchDrag: true,pullDrag: true,dots: false,navSpeed: 600,responsive: {
      0: {
        items: 1
      },400: {
        items: 2
      },760: {
        items: 3
      },1000: {
        items: 4
      }
    },nav: true
  };

}

app-component.html

<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>

在我的 angular.json 文件中添加了这些行

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.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","src/styles.css"
            ],

和 app.module

import { NgModule } from '@angular/core';
import { browserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import {RouterModule,Routes} from '@angular/router';
import { DefaultComponent } from './components/default/default.component';
import {RoutingModule} from './routing/routing.module';
import { browserAnimationsModule } from '@angular/platform-browser/animations';
import {CarouselModule} from 'ngx-owl-carousel-o';

@NgModule({
  declarations: [
    AppComponent,LoginComponent,DefaultComponent,],imports: [
    browserModule,RouterModule,RoutingModule,browserAnimationsModule,CarouselModule
  ],providers: [
  ],bootstrap: [AppComponent]
})
export class AppModule { }

解决方法

尝试以下选项。我刚刚向它添加了“navText”配置。我为左右箭头图标使用了一个名为 Themify Icons 的字体图标库，如果需要，您也可以使用 Font Awesome。

customOptions: OwlOptions = {
    loop: true,mouseDrag: true,touchDrag: true,pullDrag: true,dots: false,navText: [
      '<i class="ti-angle-left"></i>','<i class="ti-angle-right"></i>',],navSpeed: 600,responsive: {
      0: {
        items: 1
      },400: {
        items: 2
      },760: {
        items: 3
      },1000: {
        items: 4
      }
    },nav: true
  };