Как правильно подойти к вопросу: swiper 11-12??? объясните путаницу?
Сейчас ситуация такая: вопрос достаточно простой но я не верстак и немного запутался.
Сейчас ситуация такая: в шаблоне используется swiper slider 7.3.3
По вводным: но поскольку на сайте будет ну просто нереальное количество картинок пришлось подумать и о lazy в слайдере,
Сейчас ситуация такая: в 7.3.3 он даже работает но уж очень заранее начинает отображать по сути экранов за 5, а отнють не везде буду эти 5 экранов.
По вводным: посмотрел что там в последнем 12 том вроде как-раз отказались от своего лейзи в пользу браузерного, но все примеры на оф сайте 11.
По вводным: хотя документация есть на 12.
Нужно понять: кто юзал 12 скажите там как норм лейзи есть смысл переходить с 7?
Сейчас ситуация такая: может еще есть какой-то другой смысл переходить который я еще не видел.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Путаница со Swiper 11 и 12 обычно возникает из-за изменений в ESM-импортах, CSS и документации. У Swiper давно менялся способ подключения модулей, и примеры из старых статей могут не работать в новых версиях. Поэтому нужно сверять код именно с установленной версией пакета.
Сначала посмотрите версию:
npm list swiper
Для современных версий базовый импорт часто выглядит так:
import Swiper from 'swiper'; import { Navigation, Pagination } from 'swiper/modules'; import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; const swiper = new Swiper('.swiper', { modules: [Navigation, Pagination], navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', }, });import Swiper from 'swiper'; import { Navigation, Pagination } from 'swiper/modules'; import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; const swiper = new Swiper('.swiper', { modules: [Navigation, Pagination], navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', }, });
Если используете React/Vue, не смешивайте vanilla-пример с framework-компонентами. Для React импорт другой:
import { Swiper, SwiperSlide } from 'swiper/react'; import { Navigation } from 'swiper/modules'; import 'swiper/css'; import 'swiper/css/navigation';import { Swiper, SwiperSlide } from 'swiper/react'; import { Navigation } from 'swiper/modules'; import 'swiper/css'; import 'swiper/css/navigation';
Частые ошибки: забыли импортировать CSS, подключили модули старым способом, используете CommonJS в ESM-проекте, классы навигации не существуют в DOM на момент инициализации, или установлена одна версия, а читаете документацию для другой.
Итог: не пытайтесь “угадать” между 11 и 12. Зафиксируйте версию в package.json, откройте документацию именно для неё и приведите импорты к одному стилю. В большинстве проблем со Swiper виноваты не слайды, а несовпадение версии, CSS и способа подключения модулей.