@antbelogurov

Как подключить swiper в gulp?

Не могу подключить свайпер.
Если подключаю через
<script type="module">
  import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js'


То все работает.

установил пакет через npm
импортировал в js так

import Swiper from 'swiper';
const swiper = new Swiper(".swiper-image-container");


выдает такую ошибку
5fe4503d371e5657665242.png

в css
@import '../../../node_modules/swiper/swiper.scss';


css заработал, кроме пагинации. На пагинацию стили почему то не применяются.
Хотя если подключить через cdn то все ок
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ответы на вопрос 1
@catherinecd
HTML / CSS
Недавно тоже ломала голову, пришла к такому решению:

1) Устанавливаем npm i swiper
2) Подключаем его в gulp

Я создала отдельные функции для этого
function vendorJS() {
  const modules = [
    'node_modules/swiper/swiper-bundle.min.js',
    'node_modules/swiper/swiper-bundle.min.js.map',
  ];

  return src(modules)
    .pipe(dest('build/js'));
};

function vendorCSS() {
  const modules = [
    'node_modules/swiper/swiper-bundle.min.css',
  ];

  return src(modules)
    .pipe(dest('build/css/pages'));
};


3) подключаем к странице ( я пользуюсь pug-m по этому код такой )
//- swiper styles
link(rel="stylesheet" type="text/css" href="./css/pages/swiper-bundle.min.css")
//- swiper js
script(src='./js/swiper-bundle.min.js')
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы