Как добавить Swiper.js в проект Angular без ошибок ⇐ Jquery
-
Гость
Как добавить Swiper.js в проект Angular без ошибок
Я создал карусель Swiper.js в Angular, используя фрагменты CDN в моем файле index.html.
Приведенный ниже код — это то, что я поместил во внешний js-файл, который вызываю в файле angular.json.
const swiper = новый Swiper(".swiper-slider", { // Необязательные параметры centeredSlides: правда, слайдыPerView: 1, GrabCursor: правда, свободный режим: ложь, цикл: правда, колесо мыши: ложь, клавиатура: { включено: правда }, // Включен режим автозапуска Автовоспроизведение: { задержка: 5000, отключитьOnInteraction: ложь }, // Если нам нужна нумерация страниц // пагинация: { // el: ".swiper-пагинация", // динамические пули: ложь, // кликабельно: правда // }, // Если нам нужна навигация навигация: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }, // Адаптивные точки останова контрольные точки: { 640: { слайдыPerView: 1, пространствоМежду: 20 }, 1024: { слайдыPerView: 1, пространствоМежду: 20 } } При загрузке страницы все работает нормально, но если я перейду на одну из других страниц с помощью маршрутизации, а затем вернусь на страницу с включенной каруселью, карусель перестанет работать.
Я пытался удалить ссылки CDN в моем index.html и встроить Swiper.js с помощью npm.
Я новичок в Angular и пытался импортировать файлы в созданный мною компонент «Карусель», но мне это не удалось. Ищу самый простой способ установить Swiper.js в мой проект и чтобы он работал при использовании маршрутизации для разных страниц.
Я создал карусель Swiper.js в Angular, используя фрагменты CDN в моем файле index.html.
Приведенный ниже код — это то, что я поместил во внешний js-файл, который вызываю в файле angular.json.
const swiper = новый Swiper(".swiper-slider", { // Необязательные параметры centeredSlides: правда, слайдыPerView: 1, GrabCursor: правда, свободный режим: ложь, цикл: правда, колесо мыши: ложь, клавиатура: { включено: правда }, // Включен режим автозапуска Автовоспроизведение: { задержка: 5000, отключитьOnInteraction: ложь }, // Если нам нужна нумерация страниц // пагинация: { // el: ".swiper-пагинация", // динамические пули: ложь, // кликабельно: правда // }, // Если нам нужна навигация навигация: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }, // Адаптивные точки останова контрольные точки: { 640: { слайдыPerView: 1, пространствоМежду: 20 }, 1024: { слайдыPerView: 1, пространствоМежду: 20 } } При загрузке страницы все работает нормально, но если я перейду на одну из других страниц с помощью маршрутизации, а затем вернусь на страницу с включенной каруселью, карусель перестанет работать.
Я пытался удалить ссылки CDN в моем index.html и встроить Swiper.js с помощью npm.
Я новичок в Angular и пытался импортировать файлы в созданный мною компонент «Карусель», но мне это не удалось. Ищу самый простой способ установить Swiper.js в мой проект и чтобы он работал при использовании маршрутизации для разных страниц.
Мобильная версия