Why is Swiper not working for me in angular?

Question

I am trying to use Swiper but I cannot achieve it, I followed the steps in the documentation (https://swiperjs.com/get-started/), the problem is that all the images / slides are mixed together, it allows me to slide to the side but since all the images are together it does not work. It shows me a slide with all the content, which I can slide but it has nothing on the sides. I'm doing it in ngOnlnit, at first not even the swiped worked correctly, but when I added setTimeout to delay the creation of var swiper it started to work (the swiped only)

component.ts:

import 'swiper/swiper-bundle.css';
import Swiper, { Navigation, Pagination } from 'swiper';

@Component({
  selector: 'app-sing-accesorios',
  templateUrl: './sing-accesorios.component.html',
  styleUrls: ['./sing-accesorios.component.css']
})
export class SingAccesoriosComponent implements OnInit {

  constructor(){

    Swiper.use([Navigation, Pagination]);

  }

  ngOnInit(): void {

    setTimeout(function(){
        var swiper = new Swiper('.swiper-container');
    },500)

  }
}

component.html:

  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
  </div>

component.css:

.swiper-container {
  width: 100%;
  height: 100px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

Answer 1

This is just an update for Angular ^15.1.0, Swiper ^9.1.0, and Webpack ^5.75.0.

New Swiper 9.0 reference

Main entry point is app.component.html

<div class="toolbar" role="banner">
  <!-- Navigation -->
</div>

<div class="content" role="main">
  <swiper-slide></swiper-slide>

  <!-- Footer -->
  <footer>

  </footer>

</div>
<router-outlet></router-outlet>

and app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// import Swiper bundle with all modules installed
import { register } from 'swiper/element/bundle';

// import styles bundle
import 'swiper/css/bundle';
import { SwiperSlideComponent } from './swiper-slide/swiper-slide.component';

// init Swiper:
register();

@NgModule({
  declarations: [
    AppComponent,
    SwiperSlideComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I created a separate swiper-slide angular component with swiper-slide.component.html

<div class="swiper newSwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
</div>

swiper-slide.component.ts - I ran into a problem with emitting the files with Webpack and used this default trick to get it running.

For older Webpack version or even without you probably (not tested) need to adjust the @Component like this.

@Component({
  selector: 'swiper-slide',
  templateUrl: './swiper-slide.component.html'),
})

Ignore the above if u use my initially mentioned dependencies.

import { Component, ViewChild } from '@angular/core';
import Swiper from 'swiper';

@Component({
  selector: 'swiper-slide',
  template: require('./swiper-slide.component.html').default,
})
export class SwiperSlideComponent {

  @ViewChild('.newSwiper') newSwiper: any;

  constructor() {
  }
  ngOnInit(): void {

    this.newSwiper = new Swiper(".newSwiper", {
      grabCursor: true,
      effect: "creative",
      creativeEffect: {
        prev: {
          shadow: true,
          translate: [ 0, 0, -400 ],
        },
        next: {
          translate: [ "100%", 0, 0 ],
        },
      },
    });
  }

  ngAfterViewInit(): void {
  }
}

and my global styles.sass (for css add {} and ; accordingly):

// Swiper styles for effective slide components
.swiper
  margin: 100px auto
  width: 100%
  height: 500px

.swiper-slide
  display: flex
  align-items: center
  justify-content: center
  font-size: 22px
  font-weight: bold
  color: #fff

.swiper-slide:nth-child(1n)
    background-color: rgb(206, 17, 17)

.swiper-slide:nth-child(2n)
  background-color: rgb(0, 140, 255)

.swiper-slide:nth-child(3n)
  background-color: rgb(10, 184, 111)

.swiper-slide:nth-child(4n)
  background-color: rgb(211, 122, 7)

.swiper-slide:nth-child(5n)
  background-color: rgb(118, 163, 12)

.swiper-slide:nth-child(6n)
  background-color: rgb(180, 10, 47)

.swiper-slide:nth-child(7n)
  background-color: rgb(35, 99, 19)

.swiper-slide:nth-child(8n)
  background-color: rgb(0, 68, 255)

.swiper-slide:nth-child(9n)
  background-color: rgb(218, 12, 218)

.swiper-slide:nth-child(10n)
  background-color: rgb(54, 94, 77)

Run your application and enjoy the slider show 😎

Answer 2

make sure you include Swiper CSS styles and also use encapsulation in @Component

@Component({
  selector: 'app-sing-accesorios',
  templateUrl: './sing-accesorios.component.html',
  styleUrls: ['./sing-accesorios.component.css'],
  encapsulation: ViewEncapsulation.None
})

Answer 3

setTimeout(function () {
  const swiper = new Swiper('.swiper-container', {
    autoplay: {
      reverseDirection: true,
    },
  });
  const mySwiper = new Swiper(".swiper-container", {
    autoplay: true,
  });
  const swiper1 = new Swiper('.swiper-container2', {
    autoplay: {
      reverseDirection: true,
    },
  });
}, 4000);

its works for me

Answer 4

Refer to this documentation Swiper Angular

on HTML - your.component.html

<swiper [slidesPerView]="3" [spaceBetween]="50" (swiper)="onSwiper($event)" (slideChange)="onSlideChange()" #newSwiper>
  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <ng-template swiperSlide>Slide 3</ng-template>
</swiper>

Create a reference to your swiper & You must instantiate swiper on AfterViewInit - your.component.ts

@ViewChild('newSwiper') newSwiper: any;

  constructor() {
  }
  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    console.log(this.newSwiper.swiperRef);
    //Swiper instance will be displayed in console
  }

Now you can access properties and methods such as slideTo(), slideNext(), slidePrev() and etc.

this.newSwiper.swiperRef.slideTo(2, 400);

Hope this will be helpful.

Answer 5

For anyone having this problem in future - instead of using setTimeout just move the Swiper initialization from OnInit to AfterViewInit, then it works like a charm. Also there's no need to use any 3rd party libraries, as Swiper already natively supports Angular 2+.

Additionally please make sure you include Swiper CSS styles (at minimum core styles or entire bundle if you like).

Answer 6

In my case, adding

.swiper-wrapper{
    display:inline-flex;
}

works as intended.