CODEWITHSUNDEEP
angularangular5swiper.js
Olli
Olli

Reputation: 532

Swiper not working in Angular 5

I'm trying to integrate nolimts4web swiper into my Angular 5 project, I used in my index.html file

<head>
    ...
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">
</head>
<body>
    ...
  <script 
    src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"> 
  </script>
</body>

Put this in my HTML file:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-scrollbar"></div>
</div>

And initialised by putting this right before the end of the body tag in index.html:

<script>
  var mySwiper = new Swiper ('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
 </script>

Whats happening is that it shows the slide 1 in the swiper however clicking next button does nothing and I can't swipe, basically actions are not working.

Upvotes: 3

Views: 13478

Answers (2)

Alexis Su&#225;rez
Alexis Su&#225;rez

Reputation: 21

I've been looking for the answer for a long time.

In my case, I had an outdated swiper package. (https://www.npmjs.com/package/angular2-useful-swiper).

I uninstalled it and installed this npm: https://github.com/JayChase/ngx-useful-swiper (last version) for angular 7 then I followed the examples and now everything's okay.

Upvotes: 2

Yanis-git
Yanis-git

Reputation: 7885

Please use this library to avoid Swiper init before html is loaded.

---- UPDATE 1 ----

in my opinion, your issue is related to the life cycle of your HTML, that means, Swiper is initialize before html are loaded/interpreted by the browser. To avoid this issue, you can use linked library or just create component who looks like : 

// Don't forget to declare Global variable related to Swiper.
declare var Swiper: any;

@Component({
  selector: 'swiper',
  template: `
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-scrollbar"></div>
</div>
`
})
export class SwiperComponent implements AfterViewInit {
    constructor(
        private elementRef: ElementRef
    ) {}

    //[...]

    ngAfterViewInit() {
        /**
         * - Here you are 100% sure, html is present on DOM, Swiper is initialize and is able to find your DOM element.
         * - Swiper constructor accept DOMElement as parameter, i recommand this approch to optimize DOM parsing.
         * - Because you store Swiper instance as attribute, you will be able to control Swiper by javascript. 
        **/
        this.swiper = new Swiper(this.elementRef.nativeElement.querySelector('.swiper-container'), {
            //Here you can provide Swiper config
        });
    }
}

Online sample

Upvotes: 6

Related Questions