Menu
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.
678
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
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
