JS-плагины №7. Новое подключение swiper.js через npm

[@dimaburichin7726]

Вот это полезно! Делать обзоры на новые фишки после видео по данному слайдеру.

[@maxgraph]

Спасибо)

[@dimadodonov]

Привет.
В 10й версии немного поменяли расположение файлов, и теперь появилась проблема "Uncaught TypeError: _swiperBundle.default is not a constructor"

[@nomadsteppe943]

Спасибо вам огромное! Всю голову уже сломал, не мог понять, почему не работает, прошерстил кучу ссылок, и именно ваше видео помогло!

[@maxgraph]

Пожалуйста))

[@eugenenibiru2020]

пришлось посмотреть 3 раза, чтобы все заработало, но это я тупой. Спасибо за видео!

[@maxgraph]

Пожалуйста)

[@miraigrafit7865]

Спасибо за твой труд, круто!

[@maxgraph]

Пожалуйста)

[@bestviners3383]

как понять не полная зборка , обще я делаю так же результат другой , 5 раз видео просмотрел потключить не получилось

[@maxgraph]

Что не так, напишите в вк или телеграм

[@0percot926]

SOS. Uncaught TypeError: Failed to resolve module specifier "swiper". Relative references must start with either "/", "./", or "../". когда делаю импорт import Swiper from 'swiper';

[@maxgraph]

Тут нужен весь код, и смотреть установлен ли вообще свайпер в проект

[@0percot926]

@@maxgraph Не знаю как это связано, но после установки webpack и добавление его в gulp.task('js', f(){}); перед добавлением конечного файла в dist(или аналог), все работает. С добавлением конфига.

[@thebest-dh7ud]

такая же ошибка , как решили ?

[@0percot926]

@@thebest-dh7ud у меня проблема со сборщиком была

[@ГоловкоМаксим-ю4ф]

Спасибо!

[@Gerlinda137]

Ура!! Спасибо)

[@maxgraph]

Пожалуйста)

[@Марква-щ4ы]

Подскажите, будьте добры. В документации свайпера подключение стилей происходит в JS-файле, при помощи импорта "import 'swiper/css';". Мой галп ругается, говоря: "
Вам может понадобиться соответствующий загрузчик для обработки этого типа файла, в настоящее время загрузчики не настроены для обработки этого файла", но я понятия не имею, о каком загрузчике идёт речь. Хотя бы направьте, куда почитать, что изучить, чтобы понять в чём дело

[@maxgraph]

Здравствуйте. Чтоб это работало, нужно использовать сборщик webpack

[@Марква-щ4ы]

@@maxgraph У меня вебпак установлен в галп, при таком раскладе я могу что-нибудь сделать со своей проблемой?

[@maxgraph]

Нужно писать конфиг, который будет обрабатывать css через js
Но я поступаю проще - делаю импорт в scss файле с путем до папки node modules

[@7546050]

@@maxgraph а как потом эти файлы окажутся в сборке, ведь папку node modules, не переносят в готовый билд?

[@PanzarMarina]

Подскажите, пожалуйста. При установке swiper через npm, слайдер не работает, выдает Uncaught SyntaxError: Cannot use import statement outside a module.

[@arzamaskin_kirill]

посмотри у него в сборке галпа функцию scripts. Я установил webpack в сборку галпа и переписал под webpack js и работает

[@PanzarMarina]

@@arzamaskin_kirill спасибо, посмотрю )

[@asgard1428]

Максим привет. А я вот не понял как быть со стилями. Бандл мин нужно скачать и подключить или как?

[@maxgraph]

Да, именно его) привет

[@asgard1428]

@@maxgraph Что бы я не делал, все перепробовал, не могу сделать с цифрами

[@x-bit5193]

Спасибо, очень помог) А различные эффекты типа Fade, Flip и т.д. не работают через npm, подскажи может их тоже как-то по особому нужно подрубать?)

[@maxgraph]

Я не пользуюсь нпм сейчас, даже не знаю)

[@h3ckphy246]

@@maxgraph а что вы используете?

[@shakokokuashvili6584]

a pachemu na maiom POWERSHELL ne rabotaet ??

[@maxgraph]

Не могу знать) попробуйте cmd или bash

[@Artemis-ye2it]

У меня почему-то нормально не работает. Браузер выдаёт ошибку :
Failed to resolve module specifier "swiper". Relative references must start with either "/", "./", or "../".
А если я укажу путь import до node_modules прямо, то тогда заработает, но тогда не понятно как импортнуть стили

[@maxgraph]

Надо смотреть. Вчера дока обновилась, может поэтому

[@ileyzakhvatkin]

@@maxgraph тоже самое, не могу понять почему!!!!

[@romannovak375]

Добрый день а зачем вам gulp-uglify-es просто можна поменять мод на продакшен в scriptsBuild или я что-то непонимаю спасибо за ответ

[@maxgraph]

Привычка уже такая :) давно так делаю, на всех сборках

[@romannovak375]

@@maxgraph Понятно 🙂 я когда спустил build с подключённым swipe slider у меня скрипт весил 436kb 😐 в production mode 85kb. Я вам писал у меня не работали эффекты у слайдера fade, autoplay, flip надо просто подключить компоненты 😎
import Swiper, {Autoplay, EffectFade, Navigation, Pagination } from 'swiper';
Swiper.use([Autoplay, EffectFade, Navigation, Pagination]);

[@ruslanmustafin8887]

Посмотрел проблему решить не смог(

[@mini8622]

у меня тоже не гладко, в консоли ошибки и не подключает вообще

[@roma2686]

А почему на сафари не работает ?

[@maxgraph]

Работает. Видимо у вас ошибка

[@MaratHighlander]

Здравствуйте! Как я могу реализовать такое: Если слайдов больше чем 2, что бы работало autoPlay? Заранее спасибо :)

[@maxgraph]

Через условие написать)

[@maxgraph]

If...

[@MaratHighlander]

@@maxgraph Никак не получается, можете пжл пример показать?)))))

[@toprust2902]

У меня ругается на слово Impotr в js. Что делать?

[@maxgraph]

Нужно import

[@toprust2902]

@@maxgraph ха, та это я тут ошибся, консоль браузера ругалась на слово импорт. Я решил вопрос, так что уже все ок)

[@romannovak375]

Добрый день помогите пожалуйста слайд работает эффекты не работают 😫

[@maxgraph]

Какие?

[@romannovak375]

@@maxgraph в скрипту effect: 'fade',

[@maxgraph]

Ну посмотреть надо

[@romannovak375]

@@maxgraph ok спасибо большое

[@evshushkov]

@@romannovak375 решил проблему? Столкнулся щас, не работают эффекты, так же управление с клавиатуры и колесом мыши..

[@АнатолийПаутов-в9я]

что еще за npm такой, что за консоль 1:43?

[@maxgraph]

а вот и почитайте) nodejs package manager)

[@oneseasonpernight]

@@maxgraphесть возможность npm запускать прямо из VS Code

[@maxgraph]

@@oneseasonpernight знаю)

[@vinumanno8897]

СПА-СИ-БО!

[@h3ckphy246]

А почему все так геморройно? Я захотел использовать модульный swiper. и мне, чтобы подключить сам swiper core через npm надо теперь устанавливать webpack, webpackStream, babel и прочий мусор?

[@maxgraph]

Потому что так работают (или работали, по крайней мере) js модули.))

[@h3ckphy246]

@@maxgraph а как без npm подключить swiper, чтобы с отдельными модулями было? Или хотя бы без использования импортов. Я просто не хочу подключать к сайту весь swiper-bundle.js, который весит 139 КБ, google page speed ругается на неиспользуемый js код.
Вместо импортов я использую gulp-fileInclude.
Мне нужно через fileInclude подключить нужные файлы в node_modules/swiper?

[@romanf.5107]

@@h3ckphy246 нашли решение как собрать свой swiper?

[@h3ckphy246]

@@romanf.5107 да, там просто нужно установить модули webpack и webpack-stream и через него прогнать js файлы. Вот пример: th-cam.com/video/jU88mLuLWlk/w-d-xo.html. Без webpack'а все-таки никуда, но в примере который я скинул хотя бы не нужно прописывать кучу параметров и прочего.

[@artyomcherdantsev4410]

@@h3ckphy246 у меня сборка галпа как у него, но у меня выдает ошибку при подключении css стилей, могли бы подсказать

[@DreamingDolphing]

Новый Windows Terminal + oh-my-posh сделают тебе красивую консольку.

[@ЕвгенийРусских-г8е]

А зачем?

[@maxgraph]

Действительно, зачем?) power shell же прекрасно справляется

[@DreamingDolphing]

@@maxgraph Чтобы не смотреть на огромную строку с адресом папки, чтобы git status показывался. Не зря же маководы сидят поголовно в zsh с темой оформления от oh-my-zsh.

[@Learn-Dev_]

@@DreamingDolphing 100% :)))

[@serhiiretsenko2237]

@@DreamingDolphing Люди на ios вообще другие )))))) И если бы эта красота (темы оформления) давала какой-то профит, а не только нагружала машинку, можно было бы юзать.

[@Bugsy0987987]

Ничего не понятно

[@maxgraph]

Значит оно вам и не надо)