Question

我正在关注此滑块：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
      }
    }
  };

Answer 1

滑动器css本身使用

swiper-container类来应用样式等。代替删除类，您可以使用其他一些类来初始化滑动器之类的东西

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

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

working fiddle

更改班级名称时

1 个答案: