几个斯威伯滑块在同一角度的应用程序/组件？

Question

我使用刷卡添加滑块到我的角度(7)应用程序。

问题是，即使不是在同一个组件中，我也无法在同一应用程序上有单独的滑块。

Swiper doc告诉我们，当您将它与vanilla JS一起使用时：

var mySwiper = new Swiper('.swiper-container', {
  speed: 400,
  spaceBetween: 100
});

在我的角应用程序中，我在.ts文件中有这样的内容：

import { Component, OnInit, Input } from '@angular/core';
import { ProductItemVM } from 'src/app/models/product/product-item-vm';
import { SwiperConfigInterface } from 'ngx-swiper-wrapper';

@Component({
  selector: 'srp-product-carousel-container',
  templateUrl: './product-carousel-container.component.html',
  styleUrls: ['./product-carousel-container.component.scss']
})

export class ProductCarouselContainerComponent implements OnInit {
@Input() productList: ProductItemVM[];

public config: SwiperConfigInterface = {
direction: 'horizontal',
threshold: 0,
spaceBetween: 20,
slidesPerView: 1,
keyboard: true,
mousewheel: false,
scrollbar: false,
navigation: true,
pagination: true
};

constructor() { }

ngOnInit() {}
}

这是Swiper角度包装的doc。

我不能声明一个新的滑块，所以我不能调用另一个滑动容器类来瞄准不同的滑块。

有没有人有过这个问题，并找到了解决它的方法？谢谢。

Answer 1

我们可以使用ngx-swiper-wrapper在同一个页面或组件上使用多个滑块。

如果我们想增加两个卡索/滑块-一个用于推荐信，另一个用于图库，那么我们需要创建两个单独的托拉斯。

    import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss']
    })

    export class HomeComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit(): void {
      }

      gallery_config: SwiperConfigInterface = {
            direction: 'horizontal',
            slidesPerView: 1,
            allowTouchMove: true,
            pagination:{el:'.swiper-pagination',clickable:true},
            autoplay: {
              delay: 3000,
              disableOnInteraction: true
            }
      };
        
      testimonial_config: SwiperConfigInterface = {
            direction: 'horizontal',
            slidesPerView: 3,
            spaceBetween: 40,
            allowTouchMove: true,
            scrollbar:true
      };

现在将配置添加到相应的刷容器中。

将gallery_config添加到一个刷卡容器中

<div  class="swiper-container" [swiper]="gallery_config" >
        <div class="swiper-wrapper">
          <div  class="swiper-slide">
             ...
          </div>
        </div>
        <div class="swiper-pagination"></div>
</div>

将testimonial_config添加到另一个刷容器中

 <div  class="swiper-container" [swiper]="testimonial_config" >
            <div class="swiper-wrapper">
              <div  class="swiper-slide">
                 ...
              </div>
            </div>
            <div class="swiper-pagination"></div>
    </div>

如果你有更多的刷容器，那么你可以用不同的名称创建更多的配置，如果每个配置都有不同的滑动样式，那么就分配给它们。