代码之家 › 专栏 › 技术社区 › bluebrooklynbrim

在角度滑动器中获取图像和标题

swiper angular javascript

0

bluebrooklynbrim · 技术社区 · 9 年前

https://www.npmjs.com/package/angular2-useful-swiper

该软件包演示中的代码仅通过图像URL数组进行迭代。我试图通过添加一段图像标题来修改。

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

如果有一种方法可以遍历一组对象(我尝试过,但也遇到了麻烦…)

是否还有一种方法可以遍历类数组并将其分配给每个div?

slider.component.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() {
  }
}

<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>

1 回复 | 直到 9 年前

1

FAISAL 9 年前

删除您的 passes

将图像阵列更改为以下内容:

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'
            }
        ];

<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