css - 自定义 Ng-Bootstrap Carousel，显示图像和描述字段

Question

我正在尝试自定义 Angular Bootstrap Carousel!我已经能够稍微更改布局和设计，这样我就有两列，右边是图像，左边是一些文本，两边都有一些自定义箭头。

我正在尝试实现两件事:首先，是否有另一种(更有效？)列出图像的方法？目前我的 gallery.ts 有要显示的图像列表，目前还可以，但会有很多图像，所以我想知道是否有办法将它放在一个单独的文件中并从那里提取信息？

下面是我的gallery.ts:

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'app-gallery',
    templateUrl: './gallery.component.html',
    styleUrls: ['./gallery.component.scss'],
    encapsulation: ViewEncapsulation.None,
    providers: [NgbCarouselConfig]
})
export class GalleryComponent implements OnInit {

    images = [
        //"assets/images/1.jpg",
        "assets/images/12.jpg",
        "assets/images/18.jpg",
        "assets/images/15.jpg",
        "assets/images/11.jpg",
        "assets/images/13.jpg",
        "assets/images/7.jpg",
        "assets/images/16.jpg"
    ];

    constructor(config: NgbCarouselConfig) {
        // customize default values of carousels used by this component tree
        config.interval = 10000;
        config.wrap = false;
        config.keyboard = true;
        config.pauseOnHover = false;
    }

    ngOnInit() {}

}

其次，我需要随图像一起动态更改左栏中的文本。每张幻灯片都应显示日期和简短说明。有什么想法吗？

下面是我的gallery.html:

<ngb-carousel *ngIf="images">
    <ng-template ngbSlide *ngFor="let img of images; index as i">
        <div class="gallery_container">
            <div class="gallery_img">
                <figure>
            		<img [src]="img" alt="Random first slide">
                </figure>
            </div>
            <div class="gallery_description">
				<div class="description_date">
					August 20th 2016 
					<!-- To be displayed dynamically with every with slide {{ img_date ?? }} -->
				</div>
				<div class="description_text">
					<!-- To be displayed dynamically with every with slide {{ img_description ?? }} -->
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.
				</div>
			</div>
        </div>
    </ng-template>
</ngb-carousel>

Answer 1

您问题的 2 点:

• 我想知道是否有办法将它放在一个单独的文件中并从那里提取信息？

  • 是的，您可以将这些信息保存在您服务器上的一个 json 文件中……或者更好地保存在某处的数据库中；在我的示例中，我将文件放在一个 json 文件中。

• 我需要随图像一起动态更改左栏中的文本。每张幻灯片都应显示日期和简短说明

  • 你可以有一个对象而不是图像数组，在这里你可以有你在前端实际需要的任意数量的字段

相关JSON文件:

{ "imgArray": [
{"img": "https://picsum.photos/id/501/900/500", "heading" :"first", "description":"first heading's description"},
{"img": "https://picsum.photos/id/502/900/500", "heading" :"h2", "description":"second heading's description"},
{"img": "https://picsum.photos/id/503/900/500", "heading" :"h3", "description":"third heading's description"},
{"img": "https://picsum.photos/id/504/900/500", "heading" :"h4", "description":"fourth heading's description"},
{"img": "https://picsum.photos/id/505/900/500", "heading" :"h5", "description":"fifth heading's description"},
{"img": "https://picsum.photos/id/506/900/500", "heading" :"h6", "description":"sixth heading's description"},
{"img": "https://picsum.photos/id/507/900/500", "heading" :"h7", "description":"seventh heading's description"}
]
}

相关HTML:

<ngb-carousel *ngIf="images">
    <ng-template ngbSlide *ngFor="let slide of images; index as i">
        <div class='row'>
            <div class='col-lg-6 col-md-6 col-sm-6 col-6 '>
                <div class="description_date">
                    <h1>{{slide.heading}}</h1>
                </div>
                <div class="description_text">
                    {{slide.description}}
                </div>
            </div>
            <div class='col-lg-6 col-md-6 col-sm-6 col-6'>
                <div class="gallery_img">
                    <figure>
                        <img [src]="slide.img" alt="Random first slide">
          </figure>
        </div>
      </div>
    </div>
    </ng-template>
</ngb-carousel>

相关TS:

import { Component } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
import * as dataJSON from './data.json';

@Component({
  selector: 'ngbd-carousel-config',
  templateUrl: './carousel-config.html',
  providers: [NgbCarouselConfig]  // add NgbCarouselConfig to the component providers
  ,styles: [` 
  .img-fluid{ min-width:100%}
  .row{background:lightgray;}
  .description_date, .description_text { padding:5%; }
  `]
})
export class NgbdCarouselConfig {
  images:any[] = []
  readJSON = dataJSON;

    constructor(config: NgbCarouselConfig) {
        // customize default values of carousels used by this component tree
        config.interval = 10000;
        config.wrap = false;
        config.keyboard = true;
        config.pauseOnHover = false;

        this.images = this.readJSON.default.imgArray;
    }
}

工作 stackblitz here