angular - Bootstrap Carousel 中的幻灯片不是以水平形式出现,而是仅以垂直形式出现
问题描述
当前行为 Bootstrap Carousel 中的幻灯片不会出现,幻灯片只会垂直出现。在轮播中,我们希望幻灯片只能水平播放,我还附上了当前行为截图。
预期行为 轮播中的幻灯片应该像下面的示例屏幕截图一样水平出现(示例链接https://ng-bootstrap.github.io/#/components/carousel/examples)
从 github 链接https://github.com/gg-gg-v1/v1_ComponentsWithSEO run npm install run ng serve --o 将在浏览器中启动代码后,通过指令最小化重现问题
示例存储库 https://github.com/gg-gg-v1/v1_ComponentsWithSEO
环境 Angular CLI:6.2.1 节点:8.11.3 操作系统:win32 x64 Angular:6.1.7 ...动画、通用、编译器、编译器-cli、核心、表单... http、语言服务、平台浏览器。 .. 平台-浏览器-动态、平台-服务器、路由器
滑块组件.ts
import { Component, OnInit } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css'],
providers: [NgbCarouselConfig] // add NgbCarouselConfig to the component providers
})
export class SliderComponent implements OnInit {
images = [1, 2, 3, 4].map(() => `https://picsum.photos/900/500?random&t=${Math.random()}`);
constructor(config: NgbCarouselConfig) {
// customize default values of carousels used by this component tree
config.interval = 10000;
config.wrap = false;
config.keyboard = false;
config.pauseOnHover = false;
}
ngOnInit() {
}
}
滑块.component.html
<ngb-carousel *ngIf="images">
<ng-template ngbSlide>
<img [src]="images[0]" alt="Random first slide">
<div class="carousel-caption">
<h3>10 seconds between slides...</h3>
<p>This carousel uses customized default values.</p>
</div>
</ng-template>
<ng-template ngbSlide>
<img [src]="images[1]" alt="Random second slide">
<div class="carousel-caption">
<h3>No mouse events...</h3>
<p>This carousel doesn't pause or resume on mouse events</p>
</div>
</ng-template>
<ng-template ngbSlide>
<img [src]="images[2]" alt="Random third slide">
<div class="carousel-caption">
<h3>No keyboard...</h3>
<p>This carousel uses customized default values.</p>
</div>
</ng-template>
<ng-template ngbSlide>
<img [src]="images[3]" alt="Random fourth slide">
<div class="carousel-caption">
<h3>And no wrap after last slide.</h3>
<p>This carousel uses customized default values.</p>
</div>
</ng-template>
</ngb-carousel>
解决方案
您尚未导入 bootstrap.css。将其导入 angular.json 样式数组或index.html
直接提供 cdn 引用:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
推荐阅读
- python - 字典没有“定向”属性
- bash - bash-compl 和 bash-completion:没有这样的文件或目录
- cassandra - Cassandra 中多租户数据库的推荐方法是什么?
- javascript - 渲染时按顺序敲击
- ubuntu - gtkada-2018 Ubuntu-18.04.1 上的 Adacore 安装问题
- c - 如何动态地将内存分配给结构内的指针数组
- r - 使用闪亮的 r 启动一个重度使用的网络应用程序
- db2 - 从 csv 文件中解除加载 Dateformat 问题
- python - 有没有人设法使用 windows+anaconda+tensorflow 组合?
- html - 如何使此功能区横幅的侧面不透明?