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

Question

在我的项目中，我需要使用滑块。为此，我找到了 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 { }

Answer 1

尝试以下选项。我刚刚添加了“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
  };