Question

我正在使用ngx-swiper-wrapper npm软件包在SPA网站的同一页面上实现2个具有不同配置的滑块。两个滑动器滑块都在不同的组件中创建： brands.component和testimonials.component。

我的品牌模板如下：

<swiper [config]="BRANDS_SWIPER_CONFIG" [(index)]="index">
     <div class="swiper-slide">slide</div>
</swiper>

我的推荐模板如下：

<swiper [config]="TESTIMONIALS_SWIPER_CONFIG" [(index)]="index">
     <div class="swiper-slide">              
     <div class="testimonial-item text-center"></div>
</swiper>

我的应用模块

import { SwiperModule, SWIPER_CONFIG, SwiperConfigInterface } from 'ngx-swiper-wrapper';

const BRANDS_SWIPER_CONFIG: SwiperConfigInterface = {
   direction: 'horizontal',
   slidesPerView: 4,
   autoplay: { delay: 3000 },
   breakpoints:{ 640: { slidesPerView: 2 } }
 };

 const TESTIMONIALS_SWIPER_CONFIG: SwiperConfigInterface = {
      direction: 'horizontal',
      slidesPerView: 1,
 };

 @NgModule({
   providers: [
     CurrencyPipe,
     { provide: SWIPER_CONFIG, useValue: BRANDS_SWIPER_CONFIG },
     { provide: SWIPER_CONFIG, useValue: TESTIMONIALS_SWIPER_CONFIG }
  ],

TESTIMONIALS_SWIPER_CONFIG会覆盖我的BRANDS_SWIPER_CONFIG，如何进行配置，以使我的证明模板采用TESTIMONIALS_SWIPER_CONFIG的设置

Answer 1

1.Add the below mentioned script and link tag in index.html:
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">

2.Add the below given function in '.html' file of respective swiper slider component.
      <div class="brands-container swiper-container">
            <div class="swiper-wrapper">
                  <div class="swiper-slide">              
                        <div class="brands-item text-center"></div>
                  </div>
            </div>
      </div>
      <div class="testimonial-container swiper-container">
            <div class="swiper-wrapper">
                  <div class="swiper-slide">              
                        <div class="testimonial-item text-center"></div>
                  </div>
            </div>
      </div>


3.Add the below given function in '.ts' file of respective swiper slider component.

      declare var Swiper: any;

      ngOnInit() {
            var mySwiper = new Swiper('.testimonial-container .swiper-container', {
                  direction: 'horizontal',
                  loop: true,
                  effect: 'slide',
                  observer: true, 
                  observeParents: true
            });
            var mySwiper = new Swiper('.brands-container .swiper-container', {
                  direction: 'horizontal',
                  loop: true,
                  effect: 'slide',
                  observer: true, 
                  observeParents: true
            });
      }

ngx-swiper-wrapper具有针对不同滑块的多种配置

1 个答案: