Макс привет! Ты себе даже не представляешь как это меня вчера выручило. Заканчиваю заказ, как такую штуку нужно было реализовать. У меня был js для такого, но какой-то кривой. А помню у тебя был обзор на swiper, думаю дай ка посмотрю и вот попадаю на это видео! Спасибо большое!🤝
Спасибо за функцию, я делал колхознее у себя, не доходили руки для создания чего-то подобного. Взял себе на вооружение. У меня ещё есть моя функция для работы свайпера с lightGallery в режиме цикла и без. Так что теперь готов почти ко всему)) Касательно стилей - я просто прописываю все нужные стили в режиме min-width - там где на декстопе нет свайпера, а max-width - там где свайпер на телефонах.
Опа! Совсем недавно сам столкнулся с проблемой, что нужно вырубать слайдер на планшетах и ниже. Сначала пошел твоим путем (простое решение) и по брейк-поинту отключал слайдер, но потом мне надоело переписывать свайперовские стили, чтобы лэяут соответствовал макету, переопределеять стили библиотеки это дело неблагодарное, а если на странице 4 слайдера, приходится городить кучу модификаторов, жонглировать флексами и гридами, отстой. В итоге придумал свое решение, сложнее, оставил верстку без слайдера, но при достижении б-п собирал слайды с пом. js, оборачивал во все требуемые обертки, апендил обратно в дом, и только потом инициализировал слайдер, а при достижении обратного б-п вырезал контент слайдов и замещал ним же. При таком подходе намного меньше боли в css, но это уже вкусовщина. И да, все время, что я убил на этот костыль, я испытывал большую попаболь, потому что в том же React, условный рендер дается ой как легче.
В функцию следует добавить проверку наличия слайдера на странице 😉 Иначе люди получат ошибку, когда функция попытается вызвать метод destroy на странице где его нет.
@@maxgraph Поверь =) будет ошибка при ресайзе на страницах, где нет слайдера. Как один из вариантов решения. if (document.querySelector(className)) { swiper = new Swiper(className, settings); };
@@NotForSale49 Здравствуйте! У меня как раз эта ошибка с методом дестрой(( Только учусь программированию, не могу понять как ее решить( Вставил код выше в функцию инициализации свайпера, но не помогло( Может есть еще варианты?
Привет. У меня была такая задача. Сайт на битриксе. Сама структура была выстроена под слайдер, нужно было добавить нужные классы от свайпера, чтобы всё запустилось. Попробовал добавить с помощью js самостоятельно, не получилось. Даже добавил следующему слайдеру класс swiper-slide swiper-slide-next, короче сделал как в демо-версиях, и почему-то всё равно не получилось. Потом в шаблон компонента добавил вручную классы, и всё заработало. Но destroy на определенном брекпоинте не сработал( Короче, если нет возможности менять разметку, совсем грустно.
Попробовал с модулем Thumbs. То есть это два слайдера Сверху большой, снизу, допустим , 4 фото. Ну ты понял. Ожидаемо не работает. Нижний слайдер должен задаваться через переменную, которая присваивается верхнему слайдеру в виде: thumbs: {swiper: swiper,}, так происходит связь. но при запуске функции resizableSwiper переменная не назначается. В начале функции назначается переменная let swiper, но она не работает и, если бы работала,, то функция перестада бы быть универсальной. Есть ли возможность в функции resizableSwiper назначать отдельную переменную на слайдер?
делал такое адаптивное решение на slick, тот еще костыль вышел. Также пытался развернуть сторис на том же Slick, тоже спорное решение вышло. Нужно попробовать на свайпе сторис собрать
Я на slick делал тоже, у меня нормально получилось Прокидываешь медиазапросы и настройки, при нужном размере ломаешь слайдер и отрисовываешь с другими параметрами, изи
@@sergey5806задача была инициализировать слайдер через слушатель событий изменении ширины экрана и обратно. Если смоделировать то разворот устройства mobile/планшет. через responsive задача не решается. На слушатель вешались и иные условия. таймер, пагинация, навигация (типа сторис), динамическое состояние элементов, отложенная css анимация.
@@serghiokomolov2339 ну при развороте должно работать, если ты проверяешь размер вьюпорта let viewportWidth = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth; if (viewportWidth > 991) А вообще наверное ты не верный подход выбрал для создания сторис, нужно было кастомный слайдер делать. Slick уже устаревший на мой взгляд. Хотя я его везде использую. Но на проекте где нету jquery я пишу свой или ищу аналоги написаны на чистом js
@@sergey5806 Да, что-то вроде так и сделал, но консоль завыла. Что не говори но jquery все равно еще используют. Я с WP работаю и jquery там по умолчанию нужен (заказчику) конечно лучше написать костомно, но в моем случае Slick должен был быть изначально, ясно что только для сторис тяжелый slick нецелесообразно. На нем была реализовано много решений на сайте.
Макс привет! Ты себе даже не представляешь как это меня вчера выручило. Заканчиваю заказ, как такую штуку нужно было реализовать. У меня был js для такого, но какой-то кривой. А помню у тебя был обзор на swiper, думаю дай ка посмотрю и вот попадаю на это видео! Спасибо большое!🤝
Это шедевр, огромное спасибо!!
мега крутой мини плагин! Всегда хорошие вещи от Максима ! swiper function resizableSwiper
Спасибо за функцию, я делал колхознее у себя, не доходили руки для создания чего-то подобного. Взял себе на вооружение.
У меня ещё есть моя функция для работы свайпера с lightGallery в режиме цикла и без. Так что теперь готов почти ко всему))
Касательно стилей - я просто прописываю все нужные стили в режиме min-width - там где на декстопе нет свайпера, а max-width - там где свайпер на телефонах.
Шикарно! Спасибо 👏
Опа! Совсем недавно сам столкнулся с проблемой, что нужно вырубать слайдер на планшетах и ниже. Сначала пошел твоим путем (простое решение) и по брейк-поинту отключал слайдер, но потом мне надоело переписывать свайперовские стили, чтобы лэяут соответствовал макету, переопределеять стили библиотеки это дело неблагодарное, а если на странице 4 слайдера, приходится городить кучу модификаторов, жонглировать флексами и гридами, отстой.
В итоге придумал свое решение, сложнее, оставил верстку без слайдера, но при достижении б-п собирал слайды с пом. js, оборачивал во все требуемые обертки, апендил обратно в дом, и только потом инициализировал слайдер, а при достижении обратного б-п вырезал контент слайдов и замещал ним же.
При таком подходе намного меньше боли в css, но это уже вкусовщина.
И да, все время, что я убил на этот костыль, я испытывал большую попаболь, потому что в том же React, условный рендер дается ой как легче.
Собственно тоже просто делал две верстки - для слайдера и без - через условный рендеринг. На Вью.
Полезная штука, спасибо!
Супер!!! Спасибо!!!!😃😃😃😃😃😃
Пожалуйста)
супер, спасибо!
Классный материал, спасибо! 🔥
Привет. Спасибо за фичу. Ты не в курсе swiper починил работу с циклами при loop: true и брейкпоинтами?
Привет. Не замечал проблемы такой =)
@@maxgraph C 9 версии такая беда не можем делать бесконечным и при этом указывать количество слайдов к показу
спасибо!🔥
В функцию следует добавить проверку наличия слайдера на странице 😉
Иначе люди получат ошибку, когда функция попытается вызвать метод destroy на странице где его нет.
Так там же есть проверка как раз
@@maxgraph Поверь =) будет ошибка при ресайзе на страницах, где нет слайдера.
Как один из вариантов решения.
if (document.querySelector(className)) {
swiper = new Swiper(className, settings);
};
А, так ты про это) тогда понятно
@@NotForSale49 Здравствуйте! У меня как раз эта ошибка с методом дестрой(( Только учусь программированию, не могу понять как ее решить( Вставил код выше в функцию инициализации свайпера, но не помогло( Может есть еще варианты?
@@andreiBooker Допустим так.
function initSwiper() {
if (!mySwiper && document.querySelector(".service__slider")) {
mySwiper = new Swiper(".service__slider", {
slidesPerView: "auto",
a11y:false,
spaceBetween: 15,
freeMode: true,
});
};
};
подскажите почему слайдер Swiper не листается на сенсорных экранах. Что нужно добавить?
по умолчанию должен. тут уже разбираться
Может быть покажешь, как реализовать слайдер с помощью swiperjs с ютубовскими ifram-ами?
У меня есть отдельное видео про ютуб видосы. Можете их объединить) а записать может и запишу, но не быстро
@@maxgraph спасибо, поищу.
@@maxgraph я спросил, потому что там перестаёт работать слайдер, если добавляешь ютубовский айфрейм.
@@_kieлюбой айфрейм вырубает возможность перелистывать слайды свайпами
@@_kie Если ты используешь код который генит url, и вставляет в обертку, такого не должно происходить.
Привет. У меня была такая задача. Сайт на битриксе. Сама структура была выстроена под слайдер, нужно было добавить нужные классы от свайпера, чтобы всё запустилось. Попробовал добавить с помощью js самостоятельно, не получилось. Даже добавил следующему слайдеру класс swiper-slide swiper-slide-next, короче сделал как в демо-версиях, и почему-то всё равно не получилось. Потом в шаблон компонента добавил вручную классы, и всё заработало. Но destroy на определенном брекпоинте не сработал( Короче, если нет возможности менять разметку, совсем грустно.
Попробовал с модулем Thumbs. То есть это два слайдера Сверху большой, снизу, допустим , 4 фото. Ну ты понял. Ожидаемо не работает. Нижний слайдер должен задаваться через переменную, которая присваивается верхнему слайдеру в виде: thumbs: {swiper: swiper,}, так происходит связь. но при запуске функции resizableSwiper переменная не назначается. В начале функции назначается переменная let swiper, но она не работает и, если бы работала,, то функция перестада бы быть универсальной. Есть ли возможность в функции resizableSwiper назначать отдельную переменную на слайдер?
Ты можешь не использовать thumbs, а делать controller, вот код который заставляет работать swiper в табах, может быть любое количество слайдеров, возможно поможет в твоей задаче
const mainTabs = document.querySelectorAll('.tabs');
if (mainTabs) {
const tabsSliders = document.querySelectorAll('.tabs__pane');
tabsSliders.forEach(tabs => {
const slidersPrev = tabs.querySelector('.sliders-arrow__prev');
const slidersNext = tabs.querySelector('.sliders-arrow__next');
const slidersPagination = tabs.querySelector('.tabs__pagination');
const myCustomSlider = tabs.querySelectorAll('.tabs__slider');
myCustomSlider.forEach(element => {
const sliders = new Swiper(element, {
speed: 1400,
loop: true,
observer: true,
observeParents: true,
observeSliderChildren: true,
breakpoints: {
0: {
slidesPerView: 1,
spaceBetween: 20,
},
501: {
slidesPerView: 2,
spaceBetween: 20,
},
751: {
slidesPerView: 3,
spaceBetween: 20,
},
951: {
slidesPerView: 3,
spaceBetween: 30,
},
1051: {
slidesPerView: 4,
spaceBetween: 30,
},
1251: {
slidesPerView: 4,
spaceBetween: 65,
},
},
contoller: {
control: element,
},
navigation: {
nextEl: slidersNext,
prevEl: slidersPrev,
},
pagination: {
el: slidersPagination,
type: 'bullets',
clickable: true,
},
});
const tabsButton = document.querySelectorAll('.tabs__btn');
tabsButton.forEach(item => {
item.addEventListener('click', e => {
sliders.update();
sliders.thumbs.update();
sliders.navigation.update();
});
});
});
});
}
делал такое адаптивное решение на slick, тот еще костыль вышел. Также пытался развернуть сторис на том же Slick, тоже спорное решение вышло. Нужно попробовать на свайпе сторис собрать
Я на slick делал тоже, у меня нормально получилось
Прокидываешь медиазапросы и настройки, при нужном размере ломаешь слайдер и отрисовываешь с другими параметрами, изи
@@sergey5806задача была инициализировать слайдер через слушатель событий изменении ширины экрана и обратно. Если смоделировать то разворот устройства mobile/планшет. через responsive задача не решается. На слушатель вешались и иные условия. таймер, пагинация, навигация (типа сторис), динамическое состояние элементов, отложенная css анимация.
@@serghiokomolov2339 ну при развороте должно работать, если ты проверяешь размер вьюпорта
let viewportWidth = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
if (viewportWidth > 991)
А вообще наверное ты не верный подход выбрал для создания сторис, нужно было кастомный слайдер делать. Slick уже устаревший на мой взгляд. Хотя я его везде использую. Но на проекте где нету jquery я пишу свой или ищу аналоги написаны на чистом js
@@sergey5806 Да, что-то вроде так и сделал, но консоль завыла. Что не говори но jquery все равно еще используют. Я с WP работаю и jquery там по умолчанию нужен (заказчику) конечно лучше написать костомно, но в моем случае Slick должен был быть изначально, ясно что только для сторис тяжелый slick нецелесообразно. На нем была реализовано много решений на сайте.
А ссылка на готовый код есть? ))
Есть прямо в описании.
@@maxgraphВ упор не нашел. Спасибо.
вроде был уже такой видос, нет?
Нет
@@maxgraph нашёл! В видео про свайпер ближе к концу видео
@@wilezar4835 такого способа не было все равно
@@maxgraph насчёт способа не знаю, видео ещё не смотрел. Но скоро как раз надо будет сделать такое, гляну оба варианта, сравню
ТАКОЕ объяснения не кто ни когда не поймет,куча кода не понятно зачем,это все можно сделать 6 строк в js,чем такую кучу городить
Ждем ссылку на 6 строчек js-кода :)
Хорош 👍