Очень сильно помог разобраться в этом слайдере, спасибо вам большое Макс! Масимально понятно и подробно показываете, прямо как BrainsCloud , вы явно очень похожи по подаче материала. Просто супер.
Может кому-то понадобится: Если слайдер никак не хочет работать нормально (особенно если он в табах находится или это один из нескольких слайдеров), то попробуйте добавить следующие параметры: observer: true, observeParents: true, observeSlideChildren: true,
блин , ты мне помог, у меня адаптив только после f5 происходил , голову ломал , думаю ну была ни была вставил твои настройки и блин заработало . хотя перед этим сам это свойство прописывал , но только первую строчку - и было нифига . кароч , спасибо , заработало !
@Rep Fan да может и нет. Но практического смысла никакого нет ведь. Чисто в надежде собрать просмотры? Все равно сделать что-то даже похожее на свайпер - это крайне сложная и долгая задача :) В целом то я не против, но смысла - ноль)
Огромный респект, слайдер отличный, объяснения более чем отличные - даже для блондинок понятно. Главное, что этот слайдер абсолютно легко встал в wordpress
@@maxgraph А вот история с 2-мя слайдерами получилась интересная, просто в верстке все отлично встало, а на WP - первый слайдер - ок, а на втором кнопка листает и свой и первый , но, возможно, я не знаю какого-то очередного прикола WP . Кстати отлично встали в слайдер не только картинки, но и цикл вывода последних постов
Большое спасибо!!! В 2022 году с помощью вашего ролика разобрался как отключать слайдер на большом окне, хотя и классы уже поменялись. Спасибо еще раз!
Реально очень полезный видос) Это ЛАЙК! Как будет время, сделай пжл продолжение по данному слайдеру на счет настройки вертикального слайдера) Думаю, это зайдет) Спс и удачи
Я испытал оргазм. Месяц я возился в поиске универсального слайдера на чистом JS, и столько раз стрелял себе в ногу, что вспоминать не хочется. А тут за час с лишним разбор всех кейсов, что мне встречались, и все на чистом JS. Ты слёту получаешь подписку, колокольчик и огромную благодарность!
Спасибо максун, везде искал как правильно расположить этот слайдер у себя в блоке на сайте, нашел у тебя, также классно объяснил, все подробности изложил, про все тонкости рассказал (хотя по swiper найти что-то стоящее у меня не получилось кроме как у тебя). Спасибо большое! Продолжай снимать такой контент!
Если свайпер является flex-элементом или является самим Flex-контайнер, нужно на контейнер прописывать, min-width: 0; И когда слайдер находится в табах, тоже может глючить.
Поставил данный слайдер в блок на сайте. Дойдя до адаптива понял, что swiper полная хрень, удалил и переделал на slick. За видео большое спасибо, всё подробно и без воды. Может, когда-то, и swiper пригодиться.
Спасибо за урок. Впервые решил использовать swiper в верстке макета и столкнулся с проблемой. Есть табы написаны на js, в которых есть слайдеры. При переключении на таб, который ещё ни разу не открывался после загрузки страницы , то внутри слайдер не начинает работать пока не свайпнешь его мышкой. В консоле просто у класса swiper slide отсутствуют классы active и next. Потом слайдер оживает и уже работает, если даже переключить таб. Даже функция observer не помогает до конца. Без неё вообще слайдер не работает. Вот спасибо на метод update. Думаю повесить его на кнопку таба и при переключении табов он и будет пробуждать слайдеры. А так уже 2й день голову ломаю в чем мог ошибиться при написании кода.
Спасибо, очень своевременно! Видео отличается последовательностью и структурой - мне так намного легче воспринимать. Однако, названия разделов уж очень быстро исчезают, старался медленнее моргать))
@@maxgraph Наверно не совсем в тему, но все-таки.. Есть на сайте блок с изображениями. Нужно, чтоб по клику по любой картинке они открывались на весь экран (или очень крупно) и включался слайдер. Ну либо попеременно перещелкивать картинки для их увеличения. Как называется такой интерактив, может есть отдельный модуль, планируется ли на канале рассказ про такое?
Спасибо вам за вашу работу, все понятно и доступно! Хотел только подсказать что пример №6 Слайдер с увеличенным слайдом по центру можно сделать при помощи coverflowEffect без CSS
Макс, что если нужен слайдер на декстопе в несколько рядов, а на мобильном в один ряд. Дело в том, что он требует задавать максимальную высоту фиксированную. Отсюда вопрос, как ее менять, если контента больше.
Если вам нужны несколько слайдеров и допустим с разными параметрами, то надо получить массив этих слайдеров и обращаться к ним по порядковому номеру например
Видео супер!) но сам слайдер ужасен: брейкпоинты мобайлферст, нельзя задать ширину для слайдов - только высчитывать отступ в джс, лагает сам слайдер еще к тому же(брейкпоинты прописал и нифига не поменялось). Нет спасибо, буду переписывать проект на слике)
Да! Слайдер крутой! Честно говоря наткнулся на видео - искал возможность реализации такого слайдера как у Яндекса - с free mode, и понятной физикой свайпа пальцем, думал - ну все - с этим Swipe JS решил проблему. Ан нет, free mode не совсем фри, происходит в конце движения слайда прилипание, не совсем плавная динамика ускорения в режиме фрии, и при резкой остановке слайда при свайпе - физика нарушает прогнозируемый отклик. Можешь подсказать - как реализовать (можно и в рамках Swipe) как реализовать слайдер например как у Яндекс Погоды...
Хм, никак не могу понять, почему не работает в моем случае swiper.update(). Нажимаю button, display меняется на block, слайдер появляется, но анимированного обновления в инструментах разработчика как на видео 53:39, так и не происходит - анимируется только display. В чем может быть причина, почему может не работать swiper.update()?
Макс, спасибо большое за твой труд🤝 Все очень полезно! Жаль что не нашел ответа как применить swiper.updateSize(), как понимаю данный параметр помогает перезагрузить плагин чтобы размер контейнера перезагрузил размер, без него не адаптируется изображение💁♂ У меня картинка не адаптируется под размер контейнера.
@@maxgraph Макс, привет! Я нашел в чем у меня была ошибка, затупил🤦♂.
В source media было указано наоборот. Т.Е прописал сначала 1024, 768, 320 это мне и не давало корректно поставить изображение😊 при адаптивен под мобильное устройство. Но про перезагрузку плагинов аккордеон, swiper было-бы интересно посмотреть. Не зря же в API разработчик указал параметр swiper.updateSize()
Столкнулся с такой проблемой. Свайпер очень плохо работает с брейкпоинтами. Например, выставляешь на определенной ширине slidesPerView или centeredSlides и при изменении размеров экрана в инспекторе количество слайдов не меняется, а меняется только после перезагрузки страницы. Как можно пофиксить?
спасибо, отлично показал все) было полезно) А подскажи, как сделать, чтобы в реализации с 3 слайдами, где средний на первом плане, сделать такое переключение/перелистывание, без стрелок, чтобы на каждый свайп было переключение на следующий слайд, и нельзя было перескочить через несколько. В том, что ты показал, можно зажать ЛКМ и перетянуть с 2 на 8 к примеру слайд... (в твоем видео это 7 слайдер)
Спасибо автору хороший контент получился. С меня лайк и подписка. По теме данного видео есть вопрос. Возможно ли сделать с помощью swiper три слайдера на одной странице. А именно - Первый слайдер это самый верх главной страницы 1 слайд на экране, есть только пагинация и автопрокрутка и фейд. Второй слайдер одновременно показывает 3 слайда. есть только автоплей. И третий слайдер - показ 1 слайда по очереди, есть только автоплей и пагинация. Второй день ищу способ. но рабочего не нашел, видимо что то в JS не так пишу. Проблема такая, каждый слайдер имеет свой класс, для того что бы все три слайдера выглядели по разному, первые два работают нормально, но при включении третьего, и активации кнопок навигации на нем, они (кнопки) почему то съезжают в верхний слайдер. Можно ли как то исправить. ведь навигация используется только последним слайдером. Параметры для каждого слайдера прописаны отдельно.
Спасибо огромное. Подскажите, пожалуйста. Возможно ли позиционировать кнопки навигации относительно активного слайда? Например, на экране отображается одна полная картинка, а prev и next слайды чуть видны. Нужно расположить кнопки навигации относительно краев центральной картинки.
Здравствуйте, благодаря вам уже в трех проектах использовала этот плагин. Но каждый раз, когда хочу сделать слайдер со slidesPerView: auto все время одна и та же проблема, не прокручивается нормально вправо. Голову всю сломала, не знаю, как справиться.
@@maxgraph - спасибо за отклик) В выносе кнопок закралася небольшой баг, если открыть консоль нажать на кнопку и провести мышкой то будет ошибка т.к. swiper пытается высчитать размеры у несуществующего блока, как вариант можно добавлять пустой swiper-wrapper
Всё супер!! Пересмотрел видео несколько раз:) У меня такая ситуация. Всё работает, но уменьшении размера экрана, проверка на адаптивность, стрелки свайпера не доходят до первого брейкпоинта (1200рх) . Т.е. кнопка next не помещается в контейнер и появляется вертикальный скролл справа. Это начинается где-то с 1230рх. В чём может быть проблема? Кнопки вынесены за пределы свайпер контейнера
Понятно, что плагины упрощают жизнь в каком-то смысле, но что все-таки лучше. Писать на чистом js, учиться и набираться опыта, или же без зазрения совести использовать подобные плагины/библиотеки для упрощения жизни?
Писать на js все равно придётся какие-то кастомные вещи. А то, что уже есть, проще использовать. Тот же слайдер вы явно не напишете так же круто, как его писали и годами улучшали в библиотеках)
Спасибо вам за видео. Может сталкивались, как сделать, чтобы вертикальный полноэкранный слайдер становился freemode после последнего слайда и возвращался в freemode false, если скроллим опять вверх? есть событие reachEnd, на него можно подвязать freemode true. А как быть с возвращением к freemode false?
Здравствуйте, а как показать порядковый номер слайда? Допустим есть 5 слайдов и их порядковые номера, при нажатии на которые открывается тот или иной слайд. Узнал что это один из способов пагинации, но все же как это можно сделать?
Здравствуйте, если вас надо 1 из 5, то это есть в видео. А если просто номер слайда - можно смотреть на специальное событие (не помню точно название, ибо с телефона, вроде slideChange), и передавать в функцию индекс. Если не разберетесь пишите
Подскажите пожалуйста, почему во время настройки слайдера он то работает то не работает? То есть к примеру я задал ему какие то параметры он работает все ок. Потом обновляю страницу и возвращается все к началу, когда как бы только написал разметку и ничего не работает
ХОЧУ ОТДЕЛЬНО ПОБЛАГОДАРИТЬ ВАШУ МАТЕРЬ С ОТЦОМ ЗА ТО,ЧТО СОЗДАЛИ ТАКОГО ПРЕКРАСНОГО ЧЕЛОВЕКА.Боже,спасибо вам огромное
Спасибо)
Очень сильно помог разобраться в этом слайдере, спасибо вам большое Макс!
Масимально понятно и подробно показываете, прямо как BrainsCloud , вы явно очень похожи по подаче материала.
Просто супер.
Пожалуйста))
Может кому-то понадобится:
Если слайдер никак не хочет работать нормально (особенно если он в табах находится или это один из нескольких слайдеров), то попробуйте добавить следующие параметры:
observer: true,
observeParents: true,
observeSlideChildren: true,
блин , ты мне помог, у меня адаптив только после f5 происходил , голову ломал , думаю ну была ни была вставил твои настройки и блин заработало . хотя перед этим сам это свойство прописывал , но только первую строчку - и было нифига . кароч , спасибо , заработало !
Простым языком, все понятно и легко в обучении. Спасибо вам, Максим :)
Пора делать слайдер!
спасибо)
@Rep Fan а какой в этом смысл?)
@Rep Fan да может и нет. Но практического смысла никакого нет ведь. Чисто в надежде собрать просмотры?
Все равно сделать что-то даже похожее на свайпер - это крайне сложная и долгая задача :)
В целом то я не против, но смысла - ноль)
@Rep Fan рад помочь))
Огромное спасибо, облазил половину интернета и не нашёл более лучшего примера инициализации слайдера только в мобильной версии. Большущий лайк!
Пожалуйста)
Очень подробные и понятные разборы по вёрстке. Спасибо за контент!
Огромный респект, слайдер отличный, объяснения более чем отличные - даже для блондинок понятно. Главное, что этот слайдер абсолютно легко встал в wordpress
Здорово)
@@maxgraph А вот история с 2-мя слайдерами получилась интересная, просто в верстке все отлично встало, а на WP - первый слайдер - ок, а на втором кнопка листает и свой и первый , но, возможно, я не знаю какого-то очередного прикола WP . Кстати отлично встали в слайдер не только картинки, но и цикл вывода последних постов
У Вас очень крутой контент! Спасибо Вам огромное! Вы разбираете такие тонкости, которых другие даже не касаются!
Спасибо, стараюсь)
Спасибо большое за информацию, особенно за "Превращение в слайдер на мобильных устройствах" ТО что было мне нужно))
Пожалуйста)
Большое спасибо!!! В 2022 году с помощью вашего ролика разобрался как отключать слайдер на большом окне, хотя и классы уже поменялись. Спасибо еще раз!
Пожалуйста)
Спасибо большое. Наконец, благодаря Вашему видео получилось сделать то что нужно по макету. Жду новое видео по слайдеру
Охрененное видео! Нашел ответ для решения проблемы. Большое спасибо. Подписался на канал.
Спасибо)
Реально очень полезный видос) Это ЛАЙК!
Как будет время, сделай пжл продолжение по данному слайдеру на счет настройки вертикального слайдера) Думаю, это зайдет) Спс и удачи
Спасибо)
Долго я пытался понять как скрыть эти чертовы стрекли, на 12:15 ты решил мою проблему, спасибо мужик !!
Пожалуйста)
Лучшее объяснение слайдера!!! С первого раза понятны все тонкости
Спасибо)
Я так думаю лучшее видео по свайперу, как минимум одно из !
очень полезный обзор спасибо! Вроде столько раз пользовался этим плагином, а и не мало нового узнал. )
Я испытал оргазм. Месяц я возился в поиске универсального слайдера на чистом JS, и столько раз стрелял себе в ногу, что вспоминать не хочется. А тут за час с лишним разбор всех кейсов, что мне встречались, и все на чистом JS.
Ты слёту получаешь подписку, колокольчик и огромную благодарность!
Спасибо! Рад помочь) Добро пожаловать :)
Комментарий в знак благодарности за видео
Спасибо)
Спасибо максун, везде искал как правильно расположить этот слайдер у себя в блоке на сайте, нашел у тебя, также классно объяснил, все подробности изложил, про все тонкости рассказал (хотя по swiper найти что-то стоящее у меня не получилось кроме как у тебя). Спасибо большое! Продолжай снимать такой контент!
спасибо)
Благодарю за полезный видос!
Круто! Очень подробно, доходчиво и понятно! Так и нужно объяснять, спасибо)
спасибо)
Если свайпер является flex-элементом или является самим Flex-контайнер, нужно на контейнер прописывать, min-width: 0;
И когда слайдер находится в табах, тоже может глючить.
Не сталкивался, но ок)
ДА СПАСИБО ТЕБЕ ОГРОМНЕЙШЕЕ!! ПОЧЕМУ НИКТО НИКОГДА НЕ ГОВОРИТ, ЧТО ЭТИ ПАГИНАЦИИ И НАВИГАЦИИ НЕ ОБЯЗАТЕЛЬНО ДОЛЖНЫ ЛЕЖАТЬ В КОНТЕЙНЕРЕ
Пожалуйста)
Спасибо огромное я в первые использую фреймворк и я должен был добавить номер никак не мог спасибо ты помог подписка от меня
Макс, как я рад что нашел твой канал!
Здорово))
очень грамотно ответил на все вопросы, которые у меня были в голове по оформлению этого слайдера
старался) спасибо
Поставил данный слайдер в блок на сайте. Дойдя до адаптива понял, что swiper полная хрень, удалил и переделал на slick.
За видео большое спасибо, всё подробно и без воды. Может, когда-то, и swiper пригодиться.
А что с ним не так?)
Оч классный видос, прям по полочкам) прям Очень помог разобраться с некоторыми штуками. Атомный лайк)
Рад помочь)
Спасибо! Очень помогло решение со слайдером на мобилках! В принципе я знал что найду именно у тебя на канале)!
Пожалуйста)
Просто лучший человек на земле!!!
Спасибо))
Классно было бы если ты поставил бы картинки в слайды, так понятней мне кажется..
Спасибо большое, очень помог, уже нервы сдавали, но увидел твой видос и все вопросы ушли)
Пожалуйста)
отличное видео!!! а самое главное понятно и доступно рассказано. Но вопросы появятся позже)))))
Спасибо)
БОльшое человеческое Спасибо,Макс!
Пожалуйста)
Очень круто, спасибо!
Пожалуйста)
Спасибо! все понятно и доступно! пошла заниматься
Пожалуйста)
Спасибо , мне надо было знать, несколько слайдеров на одной странице )
Пожалуйста)
У вас замечательный канал с очень полезными видео! Спасибо!
Спасибо)
@@maxgraph подскажите пожалуйста, если у меня проект на gulp, могу ли я так же как вы подключить плагин? Или нужен другой способ
Можете)
канал - надежный источник знаний
Видео топчик. Спасибо👍
Пожалуйста)
Все просто, понятно. Лайк и подписка)
Мааааакс, спасибо большое за информацию). Подскажи, ты всетаки записал видео с вертикальным слайдом или нет, очень нужен)
Да, было уже) возможно в ui компонентах
Спасибо, очень помогло
Огроменное спасибо!!!))))))
Спасибо тебе большое!!!
Большое тебе спасибо за этот ролик!
Пожалуйста)
То, что надо!!! Прям лайк! лайк! лайк! Спасибо тебе!
Рад помочь)
Это лучшее видео про слайдеры, на ютубе! А я их, наверное, все пересмотрела. Так, что так держать!!!
@@igrrrra стараюсь))
45:00 - сделай видео по слайдеру с горизонтальным превью, с меня лайк и подписка и колокольчик) Спасибо за это видео
В планах лежит)
Спасибо за видео. Полезное👍
Пожалуйста)
Спасибо за урок. Впервые решил использовать swiper в верстке макета и столкнулся с проблемой. Есть табы написаны на js, в которых есть слайдеры. При переключении на таб, который ещё ни разу не открывался после загрузки страницы , то внутри слайдер не начинает работать пока не свайпнешь его мышкой. В консоле просто у класса swiper slide отсутствуют классы active и next. Потом слайдер оживает и уже работает, если даже переключить таб.
Даже функция observer не помогает до конца. Без неё вообще слайдер не работает. Вот спасибо на метод update. Думаю повесить его на кнопку таба и при переключении табов он и будет пробуждать слайдеры. А так уже 2й день голову ломаю в чем мог ошибиться при написании кода.
ни в чем ошибки нет, просто внутри табов (пока блок скрыт) слайдер не может рассчитать размеры из ничего. Поэтому и нужен update()
@@maxgraph Получилось, работает! Еще раз спасибо! )
супер видео. спасибо
Пожалуйста)
Вместо события resize можно использовать функцию Matchmedia, несраванимо более производительна плюс больше читаемость и гибкость
То что нужно. Контент огонь!
Круто!
Все очень понятно! Спасибо! Хотелось бы еще понять, как инициализировать Swiper-ы в табах? Очень просим.
да также как обычно. но когда табы переключаем - просто вызываем update() у слайдера.
Огнище!
👍
Спасибо, помог в проекте))
Пожалуйста)
Спасибо, очень своевременно! Видео отличается последовательностью и структурой - мне так намного легче воспринимать. Однако, названия разделов уж очень быстро исчезают, старался медленнее моргать))
Мне казалось на монтаже, что медленнее - слишком медленно)) так что тут скорее вкусовщина..но учту на будущее) спасибо
@@maxgraph Наверно не совсем в тему, но все-таки.. Есть на сайте блок с изображениями. Нужно, чтоб по клику по любой картинке они открывались на весь экран (или очень крупно) и включался слайдер. Ну либо попеременно перещелкивать картинки для их увеличения. Как называется такой интерактив, может есть отдельный модуль, планируется ли на канале рассказ про такое?
@@sencorio да, будет)
Спасибо за это видео!
Пожалуйста)
четко, то что нужно, спасибо
Пожалуйста)
Спасибо вам за вашу работу, все понятно и доступно! Хотел только подсказать что пример №6 Слайдер с увеличенным слайдом по центру можно сделать при помощи coverflowEffect без CSS
Макс, что если нужен слайдер на декстопе в несколько рядов, а на мобильном в один ряд. Дело в том, что он требует задавать максимальную высоту фиксированную. Отсюда вопрос, как ее менять, если контента больше.
Красава!!!!!!!!!
Спасибо)
Если вам нужны несколько слайдеров и допустим с разными параметрами, то надо получить массив этих слайдеров и обращаться к ним по порядковому номеру например
Не увидел в апи условия про это. Но так даже удобнее
спасибо, подписался, хорошо рассказал.
Спасибо!)
Видео супер!) но сам слайдер ужасен: брейкпоинты мобайлферст, нельзя задать ширину для слайдов - только высчитывать отступ в джс, лагает сам слайдер еще к тому же(брейкпоинты прописал и нифига не поменялось). Нет спасибо, буду переписывать проект на слике)
ширину задать можно) и отступ тоже можно.
Лагает - ну тут кому как, у меня вроде нет :)
Вообще красавчик))
Спасибо)
cool !
ОГРОМНОЕ СПАСИБА ИУУУ
Пожалуйста
Было бы здорово, если бы код был более крупным шрифтом
Учту на будущее :) спасибо
кстати, слайдер Tiny Slider идеально работает в режиме вертикального слайдера. подстраивается под высоту каждого слайда
Надо посмотреть)
Дружище, огромная благодарность за ролик!!!
Но есть вопрос: можно ли сделать слайдер, например, в два ряда по три слайда?
Пожалуйста =)
Да, конечно можно, есть настройка grid
Подписка )
Спасибо :)
Да! Слайдер крутой!
Честно говоря наткнулся на видео - искал возможность реализации такого слайдера как у Яндекса - с free mode, и понятной физикой свайпа пальцем, думал - ну все - с этим Swipe JS решил проблему. Ан нет, free mode не совсем фри, происходит в конце движения слайда прилипание, не совсем плавная динамика ускорения в режиме фрии, и при резкой остановке слайда при свайпе - физика нарушает прогнозируемый отклик.
Можешь подсказать - как реализовать (можно и в рамках Swipe) как реализовать слайдер например как у Яндекс Погоды...
Лучше если вы напишете в вк или телеграм, но вообще я сомневаюсь что там нужен слайдер (
Хм, никак не могу понять, почему не работает в моем случае swiper.update(). Нажимаю button, display меняется на block, слайдер появляется, но анимированного обновления в инструментах разработчика как на видео 53:39, так и не происходит - анимируется только display. В чем может быть причина, почему может не работать swiper.update()?
когда блок превращается в слайдер ошибка есть как мне кажется. Я делал window.innerWidth
Макс, привет.
Выручил, пожалуйста.
Каким микрофоном пользуешься?
И обрабатывает ли ты звук?
Спасибо.
Привет!
Tascam TM-80
Обрабатываю, да.
Спасибо большое.
Макс, спасибо большое за твой труд🤝 Все очень полезно!
Жаль что не нашел ответа как применить swiper.updateSize(), как понимаю данный параметр помогает перезагрузить плагин чтобы размер контейнера перезагрузил размер, без него не адаптируется изображение💁♂ У меня картинка не адаптируется под размер контейнера.
Возможно надо сделать дестрой, а потом заново запускать слайдер
@@maxgraph Макс, привет! Я нашел в чем у меня была ошибка, затупил🤦♂.
В source media было указано наоборот. Т.Е прописал сначала 1024, 768, 320 это мне и не давало корректно поставить изображение😊 при адаптивен под мобильное устройство.
Но про перезагрузку плагинов аккордеон, swiper было-бы интересно посмотреть. Не зря же в API разработчик указал параметр swiper.updateSize()
спасибо
Пожалуйста)
Столкнулся с такой проблемой. Свайпер очень плохо работает с брейкпоинтами. Например, выставляешь на определенной ширине slidesPerView или centeredSlides и при изменении размеров экрана в инспекторе количество слайдов не меняется, а меняется только после перезагрузки страницы. Как можно пофиксить?
спасибо, отлично показал все) было полезно)
А подскажи, как сделать, чтобы в реализации с 3 слайдами, где средний на первом плане, сделать такое переключение/перелистывание, без стрелок, чтобы на каждый свайп было переключение на следующий слайд, и нельзя было перескочить через несколько. В том, что ты показал, можно зажать ЛКМ и перетянуть с 2 на 8 к примеру слайд... (в твоем видео это 7 слайдер)
насчет свайпа не скажу, а насчет плана - можно по классу swiper-slide-active его менять. трансформ добавлять и т.д.
Спасибо автору хороший контент получился. С меня лайк и подписка. По теме данного видео есть вопрос. Возможно ли сделать с помощью swiper три слайдера на одной странице. А именно - Первый слайдер это самый верх главной страницы 1 слайд на экране, есть только пагинация и автопрокрутка и фейд. Второй слайдер одновременно показывает 3 слайда. есть только автоплей. И третий слайдер - показ 1 слайда по очереди, есть только автоплей и пагинация. Второй день ищу способ. но рабочего не нашел, видимо что то в JS не так пишу. Проблема такая, каждый слайдер имеет свой класс, для того что бы все три слайдера выглядели по разному, первые два работают нормально, но при включении третьего, и активации кнопок навигации на нем, они (кнопки) почему то съезжают в верхний слайдер. Можно ли как то исправить. ведь навигация используется только последним слайдером. Параметры для каждого слайдера прописаны отдельно.
Можно делать хоть 10 слайдеров) видимо где-то косяк в коде
Спасибо огромное. Подскажите, пожалуйста. Возможно ли позиционировать кнопки навигации относительно активного слайда? Например, на экране отображается одна полная картинка, а prev и next слайды чуть видны. Нужно расположить кнопки навигации относительно краев центральной картинки.
Можно
Расскажите пожалуйста как внутри слайдеров ставить тексты а также кнопки
Отличное видео. Благодарю. Есть идея, как можно отображать одновременно и pagination и fraction? В доке нет такого варианта.
Одну из них делать Кастомно, нагуглить можно)
@@maxgraph Спасибо. Попробую поискать
Здравствуйте, благодаря вам уже в трех проектах использовала этот плагин. Но каждый раз, когда хочу сделать слайдер со slidesPerView: auto все время одна и та же проблема, не прокручивается нормально вправо. Голову всю сломала, не знаю, как справиться.
Спасибо за видео !
А можно ли сделать отложенную подгрузку картинок, если картинки лежат с разными размерами в ?
Даже не пробовал
просьба сделать видео по беспроблемному перелистыванию вертикальных тумб в слайдере №9
Записал себе в планы, спасибо.
Чуть глаза не сломал, не у всех 32” мониторы, на 13-15” почти ничего не разобрать
Спасибо за отзыв, буду исправляться в будущих видео)
@@maxgraph - спасибо за отклик) В выносе кнопок закралася небольшой баг, если открыть консоль нажать на кнопку и провести мышкой то будет ошибка т.к. swiper пытается высчитать размеры у несуществующего блока, как вариант можно добавлять пустой swiper-wrapper
это надо протестировать, спасибо)
Всё супер!! Пересмотрел видео несколько раз:) У меня такая ситуация. Всё работает, но уменьшении размера экрана, проверка на адаптивность, стрелки свайпера не доходят до первого брейкпоинта (1200рх) . Т.е. кнопка next не помещается в контейнер и появляется вертикальный скролл справа. Это начинается где-то с 1230рх. В чём может быть проблема? Кнопки вынесены за пределы свайпер контейнера
Крутое видео! А если нужны и булеты внизу и цифры поверх слайдера?
двойная пагинация в смысле? Это можно через кастомные события устроить.
@@maxgraph Да именно)
Понятно, что плагины упрощают жизнь в каком-то смысле, но что все-таки лучше. Писать на чистом js, учиться и набираться опыта, или же без зазрения совести использовать подобные плагины/библиотеки для упрощения жизни?
Писать на js все равно придётся какие-то кастомные вещи. А то, что уже есть, проще использовать. Тот же слайдер вы явно не напишете так же круто, как его писали и годами улучшали в библиотеках)
Тоже верно, благодарю
Спасибо вам за видео. Может сталкивались, как сделать, чтобы вертикальный полноэкранный слайдер становился freemode после последнего слайда и возвращался в freemode false, если скроллим опять вверх? есть событие reachEnd, на него можно подвязать freemode true. А как быть с возвращением к freemode false?
даже не пробовал)
3 зелёных слайда в одном контейнере, это сильно.
ну
Здравствуйте, а как показать порядковый номер слайда? Допустим есть 5 слайдов и их порядковые номера, при нажатии на которые открывается тот или иной слайд. Узнал что это один из способов пагинации, но все же как это можно сделать?
Здравствуйте, если вас надо 1 из 5, то это есть в видео.
А если просто номер слайда - можно смотреть на специальное событие (не помню точно название, ибо с телефона, вроде slideChange), и передавать в функцию индекс.
Если не разберетесь пишите
@@maxgraph нашел в документации вроде, чтобы это сделать нужен этот код
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '' + (index + 1) + '';
},
},
});
Спасибо!)
а у же есть видео со слайдером в нижнем углу экрана? очень нужно. расскажи сэнсей
Подскажите пожалуйста, почему во время настройки слайдера он то работает то не работает?
То есть к примеру я задал ему какие то параметры он работает все ок. Потом обновляю страницу и возвращается все к началу, когда как бы только написал разметку и ничего не работает
Ну тут смотреть надо, сложно угадать
а все классы, которые прописаны в документации, обязательны? Я имею ввиду wrapper, slide и тд?
Да
Почему-то при сужении экрана все срабатывает как надо, а при расширении слайды пропадают и названия классов остаются свайперовские (в инспекторе)
Так уж работает свайпер)