Очень сильно помог разобраться в этом слайдере, спасибо вам большое Макс! Масимально понятно и подробно показываете, прямо как BrainsCloud , вы явно очень похожи по подаче материала. Просто супер.
Огромный респект, слайдер отличный, объяснения более чем отличные - даже для блондинок понятно. Главное, что этот слайдер абсолютно легко встал в wordpress
@@maxgraph А вот история с 2-мя слайдерами получилась интересная, просто в верстке все отлично встало, а на WP - первый слайдер - ок, а на втором кнопка листает и свой и первый , но, возможно, я не знаю какого-то очередного прикола WP . Кстати отлично встали в слайдер не только картинки, но и цикл вывода последних постов
@Rep Fan да может и нет. Но практического смысла никакого нет ведь. Чисто в надежде собрать просмотры? Все равно сделать что-то даже похожее на свайпер - это крайне сложная и долгая задача :) В целом то я не против, но смысла - ноль)
Большое спасибо!!! В 2022 году с помощью вашего ролика разобрался как отключать слайдер на большом окне, хотя и классы уже поменялись. Спасибо еще раз!
Реально очень полезный видос) Это ЛАЙК! Как будет время, сделай пжл продолжение по данному слайдеру на счет настройки вертикального слайдера) Думаю, это зайдет) Спс и удачи
Я испытал оргазм. Месяц я возился в поиске универсального слайдера на чистом JS, и столько раз стрелял себе в ногу, что вспоминать не хочется. А тут за час с лишним разбор всех кейсов, что мне встречались, и все на чистом JS. Ты слёту получаешь подписку, колокольчик и огромную благодарность!
Может кому-то понадобится: Если слайдер никак не хочет работать нормально (особенно если он в табах находится или это один из нескольких слайдеров), то попробуйте добавить следующие параметры: observer: true, observeParents: true, observeSlideChildren: true,
блин , ты мне помог, у меня адаптив только после f5 происходил , голову ломал , думаю ну была ни была вставил твои настройки и блин заработало . хотя перед этим сам это свойство прописывал , но только первую строчку - и было нифига . кароч , спасибо , заработало !
Спасибо, очень своевременно! Видео отличается последовательностью и структурой - мне так намного легче воспринимать. Однако, названия разделов уж очень быстро исчезают, старался медленнее моргать))
@@maxgraph Наверно не совсем в тему, но все-таки.. Есть на сайте блок с изображениями. Нужно, чтоб по клику по любой картинке они открывались на весь экран (или очень крупно) и включался слайдер. Ну либо попеременно перещелкивать картинки для их увеличения. Как называется такой интерактив, может есть отдельный модуль, планируется ли на канале рассказ про такое?
Спасибо за урок. Впервые решил использовать swiper в верстке макета и столкнулся с проблемой. Есть табы написаны на js, в которых есть слайдеры. При переключении на таб, который ещё ни разу не открывался после загрузки страницы , то внутри слайдер не начинает работать пока не свайпнешь его мышкой. В консоле просто у класса swiper slide отсутствуют классы active и next. Потом слайдер оживает и уже работает, если даже переключить таб. Даже функция observer не помогает до конца. Без неё вообще слайдер не работает. Вот спасибо на метод update. Думаю повесить его на кнопку таба и при переключении табов он и будет пробуждать слайдеры. А так уже 2й день голову ломаю в чем мог ошибиться при написании кода.
Макс, что если нужен слайдер на декстопе в несколько рядов, а на мобильном в один ряд. Дело в том, что он требует задавать максимальную высоту фиксированную. Отсюда вопрос, как ее менять, если контента больше.
Спасибо вам за вашу работу, все понятно и доступно! Хотел только подсказать что пример №6 Слайдер с увеличенным слайдом по центру можно сделать при помощи coverflowEffect без CSS
Если вам нужны несколько слайдеров и допустим с разными параметрами, то надо получить массив этих слайдеров и обращаться к ним по порядковому номеру например
Подскажите пожалуйста, почему во время настройки слайдера он то работает то не работает? То есть к примеру я задал ему какие то параметры он работает все ок. Потом обновляю страницу и возвращается все к началу, когда как бы только написал разметку и ничего не работает
А что делать если слайдер находится в табах и метод Update() срабатывает только при повторном нажатии на кнопку таба. Проблема именно со стрелочками (слайдер думает что там ещё есть слайды и стрелочка - вперед активна, а там пустое место) document.querySelectorAll('.cases-up').forEach(item => { item.addEventListener('click', function(e) { swiperCases.updateProgress(); swiperCases.updateSize(); swiperCases.updateSlides(); swiperCases.updateSlidesClasses(); swiperCases.update(); }) }) в сам слайдер так же добавлены параметры observer: true, observeParents: true, observeSlideChildren: true,
Здравствуйте, благодаря вам уже в трех проектах использовала этот плагин. Но каждый раз, когда хочу сделать слайдер со slidesPerView: auto все время одна и та же проблема, не прокручивается нормально вправо. Голову всю сломала, не знаю, как справиться.
Здравствуйте, а как показать порядковый номер слайда? Допустим есть 5 слайдов и их порядковые номера, при нажатии на которые открывается тот или иной слайд. Узнал что это один из способов пагинации, но все же как это можно сделать?
Здравствуйте, если вас надо 1 из 5, то это есть в видео. А если просто номер слайда - можно смотреть на специальное событие (не помню точно название, ибо с телефона, вроде slideChange), и передавать в функцию индекс. Если не разберетесь пишите
@@maxgraph нашел в документации вроде, чтобы это сделать нужен этот код var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', clickable: true, renderBullet: function (index, className) { return '' + (index + 1) + ''; }, }, }); Спасибо!)
Всё супер!! Пересмотрел видео несколько раз:) У меня такая ситуация. Всё работает, но уменьшении размера экрана, проверка на адаптивность, стрелки свайпера не доходят до первого брейкпоинта (1200рх) . Т.е. кнопка next не помещается в контейнер и появляется вертикальный скролл справа. Это начинается где-то с 1230рх. В чём может быть проблема? Кнопки вынесены за пределы свайпер контейнера
Добрый день! Всё работает прекрасно, до той поры, пока не продублируешь слайдер, т.е. пока на странице один слайдер, всё работает прекрасно. Но всё ломается, если разместить несколько слайдеров. Подскажите пожалуйста, как сделать тоже самое, но с несколькими слайдерами на странице? Пробовал forEach перебирать все слайдеры. При ресайзе окна, точнее при уменьшении, всё работает, но при увеличении ругается на destroy(), соответственное обратно не срабатывает.
@@maxgraph - спасибо за отклик) В выносе кнопок закралася небольшой баг, если открыть консоль нажать на кнопку и провести мышкой то будет ошибка т.к. swiper пытается высчитать размеры у несуществующего блока, как вариант можно добавлять пустой swiper-wrapper
Почему то не работает у вас данная ссылка, можно через впн попробовать github.com/maxdenaro/maxgraph-youtube-source/tree/master/JS-%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D1%8B%20%E2%84%963.%20%D0%9B%D1%83%D1%87%D1%88%D0%B8%D0%B9%20%D1%81%D0%BB%D0%B0%D0%B9%D0%B4%D0%B5%D1%80%20%D0%B4%D0%BB%D1%8F%20%D1%81%D0%B0%D0%B9%D1%82%D0%B0%20%D0%BD%D0%B0%20%D1%87%D0%B8%D1%81%D1%82%D0%BE%D0%BC%20JS!%20%D0%9F%D0%BE%D0%B4%D1%80%D0%BE%D0%B1%D0%BD%D1%8B%D0%B9%20%D0%BE%D0%B1%D0%B7%D0%BE%D1%80%20%D0%BF%D0%BB%D0%B0%D0%B3%D0%B8%D0%BD%D0%B0%20Swiper%20js Вот обычная
а как реализовать при помощи событий эффект когда при свайпе или нажатии на кнопку перехода слайда идет задержка перелистывания и сначала "уплывают буквы", а потом уже перелистывается картинка слайда...?
Добрый день! Подскажите как слайдер 3 столбца 2 колонки вставить в блок находящийся в строке рядом с другим. var swiper2 = new Swiper(".myGallery", { // loop: true, slidesPerView: 2, grid: { rows: 2, }, spaceBetween: 34, slidesPerGroup: 2, breakpoints: { 1025: { slidesPerView: 3, grid: { rows: 2, }, slidesPerGroup: 3, spaceBetween: 50 } }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { el: ".swiper-pagination", clickable: true, type: "fraction", }, }); Это блоки рядом .section-gallery__left { display: flex; flex-direction: column; width: 25.1%; margin-right: 49px; } .section-gallery__right { position: relative; width: 71.8%; height: 100%; } В правом - слайдер. Инициализация, всё подключено и работает. Как ему задать высоту? Если делаю фиксированную при адаптивности ползут пробелы между слайдами а не должны. Весь код взял с сайта разработчика. Здесь как надо, но плывут пробелы /* .myGallery { position: relative; width: 100%; height: 836px; padding: 85px 0 0 0; } */ Слайды идут одной колонкой, .myGallery { position: relative; width: 100%; height: 100%; padding: 85px 0 0 0; margin-right: auto; margin-left: auto; } .section-gallery__picture { text-align: center; font-size: 18px; height: calc((100% - 50px) / 2); /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } Как сделать высоту плавающую по содержимому и чтобы сетка слайдера осталась 3*2 А то везде примеры для фиксированной высоты или один слайдер на странице. Можно 2 столбца сделать одной высоты? В одном слайдер, в другом текст Без указания высоты
@@maxgraph вы про Grid? Так там он все окно занимает. 100%. А вот в потоке непонятно как задать ему высоту так чтобы не ползли промежутки между слайдами. Делаю фиксированную высоту и у меня уменьшаются сами слайды и растут промежутки. При уменьшении разрешения
Да! Слайдер крутой! Честно говоря наткнулся на видео - искал возможность реализации такого слайдера как у Яндекса - с free mode, и понятной физикой свайпа пальцем, думал - ну все - с этим Swipe JS решил проблему. Ан нет, free mode не совсем фри, происходит в конце движения слайда прилипание, не совсем плавная динамика ускорения в режиме фрии, и при резкой остановке слайда при свайпе - физика нарушает прогнозируемый отклик. Можешь подсказать - как реализовать (можно и в рамках Swipe) как реализовать слайдер например как у Яндекс Погоды...
@@maxgraph я посмотрел, не могу сделать, так чтобы он дестроился после изменения ширины окна, когда мы с мобилки 320 переходим на другой размер экрана. Это гораздо трудней, чем событие на кнопку повестить
Понятно, что плагины упрощают жизнь в каком-то смысле, но что все-таки лучше. Писать на чистом js, учиться и набираться опыта, или же без зазрения совести использовать подобные плагины/библиотеки для упрощения жизни?
Писать на js все равно придётся какие-то кастомные вещи. А то, что уже есть, проще использовать. Тот же слайдер вы явно не напишете так же круто, как его писали и годами улучшали в библиотеках)
Здравствуйте, большое спасибо за видео, долго искал подобное. Но остался один вопрос. Как, например, в одном слайдере класс swiper-pagination-current сделать белым, а во втором этот же класс черным. Хотел дополнительный класс дописать, но в самой разметке такой строки нет, только через devtools видно. И получается, что двигаю в одном слайдере, двигается и во втором...
Спасибо за отличный урок! Подскажите, пожалуйста, как использовать slidesPerColumn? Я хочу вставить 4 слайда, чтобы они располагались по 2 на строку и 2 на колонку. Когда они располагаются в одну строку, всё работает, но при попытке использования slidesPerColumn все съезжает.
@@maxgraph Так точно. Поковыряла документацию и нашла несколько решений, в т.ч. с адаптивом. Сейчас мучаюсь другим вопросом. В Вашем видео сказано, что при верстке нескольких слайдеров с одинаковыми классами не важно чтобы кнопки находились внутри слайдера. Но на практике оказалось, что если вынести кнопки за пределы слайдера, они становятся не кликабельными. А мне по дизайнерской задумке надобно вынести их немного за края. Да, есть лайфхак с padding, но в моем случае он не работает, ибо (по пока не выясненным обстоятельствам) слегка обнажает другие слайды, которых не должно быть видно. Мой вопрос в чем: а есть ли возможность сделать вынесенные кнопки кликабельными?
@@ВасилисаПупкина-ю2ж Нет, наоборот я говорил, что кнопки не должны быть снаружи (возможно оговорился). Но и это можно решить, если в цикле еще и использовать какой-то индекс, и тогда у вас будут кнопки типа swiper-button-next-1, swiper-button-next-2 и т.д.
@@maxgraph к сожалению так не пойдет, галерея будет в CMS и текст может быть непредсказуем, к тому же ширина слайдов будет адаптироваться по сетке бутстапа. Все попытки применить flex-grow упираются в конструкцию swiper-container > swiper-wrapper. Пытался определять максимальную высоту слайда и задавать её всем слайдам, но это работает не стабильно, не могу определить когда DOM отрисован уже вместе со слайдером - я получаю значения высоты слишком рано.
@@maxgraph не совсем то. В видео просто как превью, а надо именно как пагинация (активный слайд подсвечивается, не активный затемняется, например). Вот как здесь: drive.google.com/file/d/1OCRIw6N_xbAkNhrujvnMRYW4GFX4THcn/view?usp=drivesdk
@@maxgraph Да потому что одинаковый равномерный фон без теней для слайдов без отступа сливается в один большой прямоугольник. Переходы не видно, не видно вообще большую часть смены слайдов. Можно и без изображений, но с разными цветами бэкграундов
Привет! классное видео. Подскажи, как сделать что б при 768px и больше слайдер отключался, а при переходе на разрешение ниже 768 слайдер вновь становился слайдером ?
@@maxgraph Только не работает код если изначально разрешение 768, просто показывает одну карточку, а если через дев тулз менять разрешение тогда включается слайдер
у меня появляется ошибка Uncaught TypeError: Cannot read property 'dataset' of null я использую несколько слайдеров которые при разрешении меньше 767 отключаются а некоторые нет. ТАк вот проблема с теми страницами где data-mobile="false" нету такого слайдера. Как создать условие чтобы если dataset null или его вообще нету? в данный момент вот так : var dslider = document.querySelector('.slider-details-container'); let downSwiper; function switchSlider() { if (window.innerWidth >= 767 && dslider.dataset.mobile == 'false') { downSwiper = new Swiper(dslider, { pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true, }, observer: true, wrapperClass: 'slider-details-wrapper', slideClass: 'slider-details-slide', observeParents: true, slidesPerView: 1, spaceBetween: 0, speed: 800, loop: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); dslider.dataset.mobile = 'true'; } if (window.innerWidth < 767) { dslider.dataset.mobile = 'false'; downSwiper.destroy(); } } switchSlider(); window.addEventListener('resize', () => { switchSlider(); });
Такое можно происходить только если число видимых слайдов не совпадает с числом общих слайдов (либо прокручиваемых). Если же все ок - проблем нет. Но такие косяки у любого плагина(
@@maxgraph Там такая фишка, что даже если буллеты вне слайдера, то по ним даже можно буквально сколлить(движением мыши, пальца) Может из-за этого возникают проблемы?)
