gpt4 book ai didi

javascript - 在 Angular Swiper 中获取图像和标题

转载 作者:行者123 更新时间:2023-12-03 03:41:58 25 4
gpt4 key购买 nike

我正在使用 Swiper ( https://www.npmjs.com/package/angular2-useful-swiper ) 来显示图像和标题库。

此包演示中的代码仅迭代图像 url 数组。我尝试通过添加图像标题段落来进行修改。

我想迭代 2 个数组(一个是图像链接数组,另一个是相应图像的标题数组。)我觉得这段代码几乎可以工作,它确实迭代了两个数组,但是它打印了 3 次,而不是作为 slider ......

如果有一种方法可以迭代对象数组(我尝试过,但我也被困住了......)

是否还有一种方法可以迭代类数组并将它们分配给每个 div?

slider .组件.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-symptoms-slider',
templateUrl: './symptoms-slider.component.html',
styleUrls: ['./symptoms-slider.component.scss']
})
export class SymptomsSliderComponent implements OnInit {
variants = [
'hvr-pulse-grow',
'hvr-buzz',
'hvr-wobble-vertical',
];

passes = [
'Caption 1',
'Caption 2',
'Caption 3',
'Caption 4',
'Caption 5',
'Caption 6',
];
slides: Slide[];
images = [
'../assets/images/swiper-symptoms/fatigue.png',
'../assets/images/swiper-symptoms/craving.png',
'../assets/images/swiper-symptoms/chewing.png',
'../assets/images/swiper-symptoms/restless.png',
'../assets/images/swiper-symptoms/cold.png'
];
config: Object = {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 4,
spaceBetween: 30,
loop: true,
breakpoints: {
// when window width is <= 320px
767: {
slidesPerView: 3,
spaceBetween: 10
}
}
};
constructor() { }
ngOnInit() {
}
}

slider.component.html

<swiper class="swiper" [config]="config">
<div class="swiper-wrapper test">
<div class="swiper-slide">
<img [ngClass]="variants" *ngFor="let image of images" [src]="image">
<div class="caption"><p *ngFor="let pass of passes">{{pass}}</p></div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</swiper>

最佳答案

删除您的passes 变量。

Change your images array to following:

images = [  { 
'src':'../assets/images/swiper-symptoms/fatigue.png',
'caption':'Caption 1'
},
{
'src':'../assets/images/swiper-symptoms/craving.png',
'caption':'Caption 2'
},
{
'src':'../assets/images/swiper-symptoms/chewing.png',
'caption':'Caption 3'
},
{
'src':'../assets/images/swiper-symptoms/restless.png',
'caption':'Caption 4'
},
{
'src':'../assets/images/swiper-symptoms/cold.png',
'caption':'Caption 5'
}
];

Then change your html to following:

<swiper class="swiper" [config]="config">
<div class="swiper-wrapper test">
<div class="swiper-slide" *ngFor="let image of images">
<img [ngClass]="variants" [src]="image.src">
<div class="caption">
<p>{{image.caption}}</p>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</swiper>
<小时/>

这是一个演示:PLUNKER DEMO

关于javascript - 在 Angular Swiper 中获取图像和标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45570744/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com