Angular项目中Owl Carousel卡片无法横向排列问题求助

问题描述 #

在Angular项目的home-component.html中使用ngx-owl-carousel-o组件展示产品卡片时，卡片无法按预期横向排列，尝试给owl-stage类添加display:flex样式也无法解决问题。

相关代码 #

home-component.html

<section>
  <div class="container">
    <h1 class="products-title">New Arrivals</h1>
    <div class="slider">
      <owl-carousel-o [options]="customOptions" class="owl-stage">
        <ng-template carouselSlide *ngFor="let product of products">
          <div class="card">
            <div class="card-content" [ngStyle]="{'background-color': isDarkTheme ? '#5eda5e' : '#3b5b2d'}">
              <img class="product-image" [src]="product.imgSrc" [alt]="product.name">
              <h2 class="product-title">{{ product.name | translate}}</h2>
              <p class="product-description">{{ product.description | translate}}</p>
              <p class="product-price">{{ product.price | currency:'USD':'symbol':'1.2-2' }}</p>
            </div>
          </div>
        </ng-template>
      </owl-carousel-o>
    </div>
  </div>
</section>

app-component.ts

import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';
import { Product } from './product.model';
import { TranslateService } from '@ngx-translate/core';
import { Renderer2 } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'GreenGrocery';
  products: Product[] = [];
  fruit: any;
  fruit_title: any;
  isDarkTheme: boolean = false;

  // Initialize dark_mode and light_mode with translation keys
  dark_mode: string = 'assets/img/crescent-moon.png';
  light_mode: string = 'assets/img/sunny.png';

  constructor(private productService: ProductService, public translate: TranslateService, private renderer: Renderer2) {
    // Set default language
    this.translate.setDefaultLang('en');
    // Set initial language if needed
    this.translate.use('en');
    translate.addLangs(['en', 'tr']);
  }

  ngOnInit(): void {
    this.products = this.productService.getProducts();
    this.isDarkTheme = localStorage.getItem('theme') === "Dark";
    this.translate.get('assets/img/crescent-moon.png').subscribe((res: string) => {
      this.dark_mode = res;
    });
    this.translate.get('assets/img/sunny.png').subscribe((res: string) => {
      this.light_mode = res;
    });
    this.setBodyBackground();
    this.productText();
  }

  switchLanguage(lang: string) {
    this.translate.use(lang);
  }

  ChangeLang(event: any) {
    const lang = event.target.value;
    this.switchLanguage(lang);
    localStorage.setItem('theme', this.isDarkTheme ? 'Dark' : 'Light');
    this.languageBackground();
  }

  storeThemeSelection() {
    localStorage.setItem('theme', this.isDarkTheme ? 'Dark' : 'Light');
    this.setBodyBackground();
    this.productText();
    this.footerBackground();
    this.cardBackground();
  }

  private setBodyBackground() {
    const backgroundColor = this.isDarkTheme ? '#3b5b2d' : '#5eda5e';
    this.renderer.setStyle(document.body, 'background-color', backgroundColor);
  }

  private productText() {
    const color = this.isDarkTheme ? '#ffffff' : '#000000';
    this.renderer.setStyle(document.body, 'color', color);
  }

  private footerBackground() {
    const footerBackgroundColor = this.isDarkTheme ? '#4d4d4d' : '#ffffff';
    this.renderer.setStyle(document.querySelector('.footer'), 'background-color', footerBackgroundColor);
  }
 
  private languageBackground() {
    const color = this.isDarkTheme ? '#ffffff' : '#000000';
    this.renderer.setStyle(document.body, 'color', color);
  }

  private cardBackground() {
    const cardBackground = this.isDarkTheme ? '#5eda5e' : '#3b5b2d';
    const cardContents = document.querySelectorAll('.card-content');
    cardContents.forEach(cardContent => {
        this.renderer.setStyle(cardContent, 'background-color', cardBackground);
    });
  }

  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: true,
    navSpeed: 700,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1
      },
      400: {
        items: 2
      },
      740: {
        items: 3
      },
      940: {
        items: 4
      }
    },
    nav: true
  }
}

解决方案 #

• 引入Owl Carousel的默认样式
  ngx-owl-carousel-o依赖自身的CSS文件实现布局，需在src/styles.css中添加以下代码：

  @import "~ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css";
  @import "~ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css";
  

• 移除自定义的owl-stage类
  组件内部会自动生成owl-stage类并设置布局样式，手动添加会干扰默认逻辑，修改后的标签代码：

  <owl-carousel-o [options]="customOptions">
  

• 设置卡片的合适宽度
  给卡片添加自适应宽度，避免宽度过大导致无法横向排列，在组件CSS文件中添加：

  .card {
    width: 100%;
    max-width: 280px;
    margin: 0 8px;
    box-sizing: border-box;
  }
  

• 验证配置是否生效
  在ngOnInit中打印配置，确认组件能正确读取响应式设置：

  ngOnInit(): void {
    // ...其他代码
    console.log(this.customOptions);
  }
  

• 检查Renderer2的样式修改
  确认cardBackground方法仅修改背景色，未设置display等影响布局的属性，当前该方法逻辑正常无需修改。

内容的提问来源于stack exchange，提问作者MR.NOTHING