Swiper не работает в Angular 5
Я пытаюсь интегрировать nolimts4web swiper в свой проект Angular 5, который я использовал в своем файле index.html
<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>
Поместите это в мой HTML-файл:
<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>
И инициализируется помещением этого текста прямо перед концом тега body в index.html:
<script>
var mySwiper = new Swiper ('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
Что происходит, так это то, что он показывает slide 1 в свайпере, однако нажатие следующей кнопки ничего не делает, и я не могу смахивать, в основном действия не работают.
Ответы 2
Пожалуйста, используйте этот библиотека, чтобы избежать инициализации Swiper перед загрузкой html.
---- ОБНОВЛЕНИЕ 1 ----
на мой взгляд, ваша проблема связана с жизненным циклом вашего HTML, это означает, что Swiper инициализируется до того, как HTML будет загружен / интерпретирован браузером. Чтобы избежать этой проблемы, вы можете использовать связанную библиотеку или просто создать компонент, который выглядит так:
// 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
});
}
}
Это не будет считаться ответом, поскольку в нем не содержится более подробной информации, чем ссылка. Если у вас есть дополнительные сведения, вы можете обновить свой ответ. Иначе это просто комментарий к этому вопросу.
@TheDictator Я обновил свой ответ и добавил онлайн-образец.
Я получаю эту ошибку в консоли: ERROR TypeError: Cannot read property '0' of undefined at Swiper.updateSize есть идеи?
Вероятно, вам следует создать еще одну тему с работоспособным примером вашей проблемы. Если вы пингуете меня здесь, я постараюсь найти для вас решение.
@ Yanis-git где заявлен this.swiper? Lint выдает ошибку в этой строке
да, вы должны объявить свойство с помощью тип swiper
Я использую ваш экземпляр swiper, хотя TS / Ionic временами похож на черную магию. Можете ли вы объяснить, почему, если я сделаю это .swiper = new Swiper (". Swiper-container", согласно образцу кода swiper API / demos. Я получаю массив из 2 свайперов? Спасибо.
Давно искал ответ.
В моем случае у меня был устаревший пакет swiper. (https://www.npmjs.com/package/angular2-useful-swiper).
Я удалил его и установил npm: https://github.com/JayChase/ngx-useful-swiper (последняя версия) для angular 7, затем я последовал примерам, и теперь все в порядке.
использование nolimts4web полностью отличается от того, что вы пытаетесь использовать, они использовали <ks-swiper-containe> свой собственный модуль для этого, вы используете то же самое?