CODEWITHSUNDEEP
angulartypescriptswiper.js
danda
danda

Reputation: 583

Angular with swiper - pagination does not work

I am working with swiper in my angular app by this documentation- https://swiperjs.com/angular

In my styles.css-

@import '~swiper/swiper-bundle';

My html looks like-

<h1>Thumbs</h1>
<swiper [slidesPerView]="1" [spaceBetween]="50" [pagination]="{ clickable: true }" [autoplay]="true">
    <ng-template swiperSlide>Slide 1</ng-template>
    <ng-template swiperSlide>Slide 2</ng-template>
    <ng-template swiperSlide>Slide 3</ng-template>
    <ng-template swiperSlide>Slide 4</ng-template>
    <ng-template swiperSlide>Slide 5</ng-template>
    <ng-template swiperSlide>Slide 6</ng-template>
</swiper>

And in my component-

import { Component, OnInit } from '@angular/core';

// import Swiper core and required components
import SwiperCore, {
    Navigation,
    Pagination,
    Scrollbar,
    A11y,
    Virtual,
    Zoom,
    Autoplay,
    Thumbs,
    Controller
} from "swiper/core";

SwiperCore.use([
    Navigation,
    Pagination,
    Scrollbar,
    A11y,
    Virtual,
    Zoom,
    Autoplay,
    Thumbs,
    Controller
]);

@Component({
    selector: 'esp-portal-intro',
    templateUrl: './portal-intro.component.html',
    styleUrls: ['./portal-intro.component.scss']
})
export class PortalIntroComponent implements OnInit {


    constructor() {
    }
}

The swiper works correctly except the pagination, I cannot see it, any idea why?

Upvotes: 1

Views: 2384

Answers (2)

Nylon Smile
Nylon Smile

Reputation: 9436

In the newer versions you need to:

// to enable both navigation and pagination:
SwiperCore.use([Navigation, Pagination]);

CSS imports:

@import "~swiper/css";
@import "~swiper/css/navigation";
@import "~swiper/css/pagination";

A sample config object to pass to the swiper component:

  config: SwiperOptions = {
    slidesPerView: 3,
    spaceBetween: 50,
    navigation: true,
    pagination: { clickable: true },
    scrollbar: { draggable: true },
  };

Upvotes: 2

danda
danda

Reputation: 583

Apparently it relates to the version, it's working on "6.4.15" but not on the latest swiper version.

Upvotes: 0

Related Questions