更改类名时，Swiper angular 7 不起作用答案

【问题标题】：Swiper angular 7 not working when change the class name更改类名时，Swiper angular 7 不起作用
【发布时间】：2019-08-26 11:34:18
【问题描述】：

我正在关注这个滑块：Swiper

我的项目中有 2 个滑动滑块，它们都有不同的分类。

一个滑块在类名swiper-container 下工作正常。但是当我要如下更改第二个滑块的类名时，它不起作用。

第一个滑块每张幻灯片有 4 个项目，我希望第二个滑块每张幻灯片应该有 1 个项目。这就是为什么我要更改滑块容器的名称。

HTML：

<div class="intro-swiper-container"> <--- changing this class name
            <div class="swiper-wrapper">
                <div *ngFor="let temp of tempArr" class="swiper-slide">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title intro-title">Header {{temp}}</h5>
                            <p class="card-text intro-body">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
                            </p>
                            <button type="button" class="btn btn-block css-btn" (click)="inforDialogClose()">Skip</button>
                        </div>
                    </div>
                </div>
            </div>
</div>

ts：

var swiper = new Swiper('.intro-swiper-container', {
                    slidesPerView: 1,
                    spaceBetween: 50,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    breakpoints: {
                        1024: {
                            slidesPerView: 1,
                            spaceBetween: 40,
                        },
                        768: {
                            slidesPerView: 1,
                            spaceBetween: 30,
                        },
                        640: {
                            slidesPerView: 1,
                            spaceBetween: 20,
                        },
                        320: {
                            slidesPerView: 1,
                            spaceBetween: 10,
                        }
                    }
                });

所有必需的库都已导入core.module.ts 文件。当我更改类名时，我不明白为什么它不起作用。

core.module.ts：

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

const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
    direction: 'horizontal',
    slidesPerView: 1,
    keyboard:true,
    mousewheel:true,
    scrollbar:true,
    navigation:true,
    pagination:true,
    breakpoints:{
      640:{
        slidesPerView:1
      }
    }
  };

【问题讨论】：

标签： angular slider carousel angular7 swiper

【解决方案1】：

swiper-container 类被 swiper css 本身用于应用样式等。您可以使用其他类来初始化 swiper 之类的东西，而不是删除类。

 <div class="swiper-container s1" > 
 new Swiper('.s1', {

 <div class="swiper-container s2" > 
 new Swiper('.s2', {

working fiddle

【讨论】：

它只有 1 个滑块
你可以为你的问题创建一个stackbliz
我也遵循了同样的方法，但不知何故它不起作用！
你可以为你的问题创建一个小提琴或堆栈闪电战吗？可能你正在使用 swiper-container 为一个 swiper 尝试使用两个不同的类而不是 swiper 容器类
我也这样做了。但可能是我在弹出窗口中使用了第二个刷卡器，这就是它不起作用的原因。实际上我在 Angular 中使用。