猫头鹰旋转木马在下面的图像中放置下一个和上一个图像

Question

我正在使用 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>

这是我的输出。你可以看到轮播底部的导航按钮，虽然不是世界末日，但我似乎无法将它们放在轮播本身的左侧和右侧。

在我的 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"
]

Answer 1

我们可以使用下面的CSS来实现你想要的，我起诉

position: absolute

将导航覆盖在幻灯片上以获得所需的效果！

  ::ng-deep .owl-carousel  {
    position: relative !important;
  }
  ::ng-deep .owl-nav {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

如果您不喜欢

::ng-deep

，您可以将样式移至全局样式并将它们包装在一个类中，以便根据类有条件地应用它们！

完整代码：

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { CarouselModule, OwlOptions } from 'ngx-owl-carousel-o';
import 'zone.js';

@Component({
  selector: 'app-root',
  styles: [
    `
      ::ng-deep .owl-carousel  {
        position: relative !important;
      }
      ::ng-deep .owl-nav {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
      }
    `,
  ],
  standalone: true,
  imports: [CarouselModule],
  template: `
    <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>
  `,
})
export class App {
  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,
  };
}

bootstrapApplication(App);

Stackblitz 演示