Лучший слайдер для сайта на чистом JS! Подробный обзор плагина Swiper js

[@JuiSosu]

ХОЧУ ОТДЕЛЬНО ПОБЛАГОДАРИТЬ ВАШУ МАТЕРЬ С ОТЦОМ ЗА ТО,ЧТО СОЗДАЛИ ТАКОГО ПРЕКРАСНОГО ЧЕЛОВЕКА.Боже,спасибо вам огромное

[@maxgraph]

Спасибо)

[@peterparker3794]

Очень сильно помог разобраться в этом слайдере, спасибо вам большое Макс! Масимально понятно и подробно показываете, прямо как BrainsCloud , вы явно очень похожи по подаче материала. Просто супер.

[@maxgraph]

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

[@one-zero-dev]

Очень подробные и понятные разборы по вёрстке. Спасибо за контент!

[@a.k.9386]

Макс, как я рад что нашел твой канал!

[@maxgraph]

Здорово))

[@Кемаль-я9е]

Огромное спасибо, облазил половину интернета и не нашёл более лучшего примера инициализации слайдера только в мобильной версии. Большущий лайк!

[@maxgraph]

Пожалуйста)

[@olehua7602]

Спасибо большое. Наконец, благодаря Вашему видео получилось сделать то что нужно по макету. Жду новое видео по слайдеру

[@artemrepin1746]

Я так думаю лучшее видео по свайперу, как минимум одно из !

[@belovmihan]

Моё уважение автору видео! Я не профи в JS, разбираться если что-то не работает в коде крайне тяжело. Сейчас я потратил много времени в попытках настроить Owl.js , это был кошмар. Но Swiper.js заработал сразу же и я даже без труда смог его стилизовать. Повторюсь, большое вам спасибо!

[@maxgraph]

Пожалуйста)

[@vzrosly_muzik]

Простым языком, все понятно и легко в обучении. Спасибо вам, Максим :) Пора делать слайдер!

[@maxgraph]

спасибо)

[@maxgraph]

@Rep Fan а какой в этом смысл?)

[@maxgraph]

@Rep Fan да может и нет. Но практического смысла никакого нет ведь. Чисто в надежде собрать просмотры? Все равно сделать что-то даже похожее на свайпер - это крайне сложная и долгая задача :) В целом то я не против, но смысла - ноль)

[@maxgraph]

@Rep Fan рад помочь))

[@ЮрийКулясов-у2т]

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

[@maxgraph]

Пожалуйста)

[@ТатьянаГерасимова-л8э]

Огромный респект, слайдер отличный, объяснения более чем отличные - даже для блондинок понятно. Главное, что этот слайдер абсолютно легко встал в wordpress

[@maxgraph]

Здорово)

[@ТатьянаГерасимова-л8э]

@@maxgraph А вот история с 2-мя слайдерами получилась интересная, просто в верстке все отлично встало, а на WP - первый слайдер - ок, а на втором кнопка листает и свой и первый , но, возможно, я не знаю какого-то очередного прикола WP . Кстати отлично встали в слайдер не только картинки, но и цикл вывода последних постов

[@0xlex695]

У Вас очень крутой контент! Спасибо Вам огромное! Вы разбираете такие тонкости, которых другие даже не касаются!

[@maxgraph]

Спасибо, стараюсь)

[@ЮрійДмитрик-в9в]

Спасибо большое за информацию, особенно за "Превращение в слайдер на мобильных устройствах" ТО что было мне нужно))

[@maxgraph]

Пожалуйста)

[@yaninapihal6325]

Лучшее объяснение слайдера!!! С первого раза понятны все тонкости

[@maxgraph]

Спасибо)

[@mefioz2397]

Долго я пытался понять как скрыть эти чертовы стрекли, на 12:15 ты решил мою проблему, спасибо мужик !!

[@maxgraph]

Пожалуйста)

[@Denik-is6gi]

очень полезный обзор спасибо! Вроде столько раз пользовался этим плагином, а и не мало нового узнал. )

[@tonit2237]

Реально очень полезный видос) Это ЛАЙК! Как будет время, сделай пжл продолжение по данному слайдеру на счет настройки вертикального слайдера) Думаю, это зайдет) Спс и удачи

[@maxgraph]

Спасибо)

[@alessiorichter3634]

Охрененное видео! Нашел ответ для решения проблемы. Большое спасибо. Подписался на канал.

[@maxgraph]

Спасибо)

[@ivan.tsybko]

Может кому-то понадобится: Если слайдер никак не хочет работать нормально (особенно если он в табах находится или это один из нескольких слайдеров), то попробуйте добавить следующие параметры: observer: true, observeParents: true, observeSlideChildren: true,

[@максим-м9ж5э]

блин , ты мне помог, у меня адаптив только после f5 происходил , голову ломал , думаю ну была ни была вставил твои настройки и блин заработало . хотя перед этим сам это свойство прописывал , но только первую строчку - и было нифига . кароч , спасибо , заработало !

[@Anatoli-bq1pe]

Благодарю за полезный видос!

[@kirillsander4607]

Спасибо максун, везде искал как правильно расположить этот слайдер у себя в блоке на сайте, нашел у тебя, также классно объяснил, все подробности изложил, про все тонкости рассказал (хотя по swiper найти что-то стоящее у меня не получилось кроме как у тебя). Спасибо большое! Продолжай снимать такой контент!

[@maxgraph]

спасибо)

[@evgeniyk4850]

Спасибо! Очень помогло решение со слайдером на мобилках! В принципе я знал что найду именно у тебя на канале)!

[@maxgraph]

Пожалуйста)

[@Sergey_Klimov]

ДА СПАСИБО ТЕБЕ ОГРОМНЕЙШЕЕ!! ПОЧЕМУ НИКТО НИКОГДА НЕ ГОВОРИТ, ЧТО ЭТИ ПАГИНАЦИИ И НАВИГАЦИИ НЕ ОБЯЗАТЕЛЬНО ДОЛЖНЫ ЛЕЖАТЬ В КОНТЕЙНЕРЕ

[@maxgraph]

Пожалуйста)

[@davidfromnorth7836]

очень грамотно ответил на все вопросы, которые у меня были в голове по оформлению этого слайдера

[@maxgraph]

старался) спасибо

[@realjones]

Круто! Очень подробно, доходчиво и понятно! Так и нужно объяснять, спасибо)

[@maxgraph]

спасибо)

[@robertvaksman2033]

БОльшое человеческое Спасибо,Макс!

[@maxgraph]

Пожалуйста)

[@ДенисПодберезных]

Оч классный видос, прям по полочкам) прям Очень помог разобраться с некоторыми штуками. Атомный лайк)

[@maxgraph]

Рад помочь)

[@anikinae]

Комментарий в знак благодарности за видео

[@maxgraph]

Спасибо)

[@crafters2454]

Спасибо огромное я в первые использую фреймворк и я должен был добавить номер никак не мог спасибо ты помог подписка от меня

[@detro1821]

Просто лучший человек на земле!!!

[@maxgraph]

Спасибо))

[@vanityzzz3114]

Спасибо большое, очень помог, уже нервы сдавали, но увидел твой видос и все вопросы ушли)

[@maxgraph]

Пожалуйста)

[@АнастасияБелова-р6с]

Спасибо! все понятно и доступно! пошла заниматься

[@maxgraph]

Пожалуйста)

[@temamx]

Очень круто, спасибо!

[@maxgraph]

Пожалуйста)

[@PRO-vr1pm]

Спасибо , мне надо было знать, несколько слайдеров на одной странице )

[@maxgraph]

Пожалуйста)

[@Expertdog]

отличное видео!!! а самое главное понятно и доступно рассказано. Но вопросы появятся позже)))))

[@maxgraph]

Спасибо)

[@alexandrgusletsov2567]

канал - надежный источник знаний

[@Gerlinda137]

У вас замечательный канал с очень полезными видео! Спасибо!

[@maxgraph]

Спасибо)

[@Gerlinda137]

@@maxgraph подскажите пожалуйста, если у меня проект на gulp, могу ли я так же как вы подключить плагин? Или нужен другой способ

[@maxgraph]

Можете)

[@МаксимСергеевич-п2б]

Если свайпер является flex-элементом или является самим Flex-контайнер, нужно на контейнер прописывать, min-width: 0; И когда слайдер находится в табах, тоже может глючить.

[@maxgraph]

Не сталкивался, но ок)

[@ВадимБогданов-й1ч]

Я испытал оргазм. Месяц я возился в поиске универсального слайдера на чистом JS, и столько раз стрелял себе в ногу, что вспоминать не хочется. А тут за час с лишним разбор всех кейсов, что мне встречались, и все на чистом JS. Ты слёту получаешь подписку, колокольчик и огромную благодарность!

[@maxgraph]

Спасибо! Рад помочь) Добро пожаловать :)

[@xoxo2880808]

Большое тебе спасибо за этот ролик!

[@maxgraph]

Пожалуйста)

[@sergeypeksymov6549]

Видео топчик. Спасибо👍

[@maxgraph]

Пожалуйста)

[@elif.3258]

Спасибо за видео. Полезное👍

[@maxgraph]

Пожалуйста)

[@Evgeny1996]

Поставил данный слайдер в блок на сайте. Дойдя до адаптива понял, что swiper полная хрень, удалил и переделал на slick. За видео большое спасибо, всё подробно и без воды. Может, когда-то, и swiper пригодиться.

[@maxgraph]

А что с ним не так?)

[@kasparsburvis7371]

Спасибо вам за вашу работу, все понятно и доступно! Хотел только подсказать что пример №6 Слайдер с увеличенным слайдом по центру можно сделать при помощи coverflowEffect без CSS

[@svet0v]

45:00 - сделай видео по слайдеру с горизонтальным превью, с меня лайк и подписка и колокольчик) Спасибо за это видео

[@maxgraph]

В планах лежит)

[@Успешныелюди-ф1ь]

Мааааакс, спасибо большое за информацию). Подскажи, ты всетаки записал видео с вертикальным слайдом или нет, очень нужен)

[@maxgraph]

Да, было уже) возможно в ui компонентах

[@entus1asmWeb-dev]

Спасибо тебе большое!!!

[@ВадимНазаров-д7з]

То что нужно. Контент огонь!

[@ВадимБекмансуров]

Спасибо, очень помогло

[@k0pernik91]

Все просто, понятно. Лайк и подписка)

[@Dim_Dimych21]

Спасибо за урок. Впервые решил использовать swiper в верстке макета и столкнулся с проблемой. Есть табы написаны на js, в которых есть слайдеры. При переключении на таб, который ещё ни разу не открывался после загрузки страницы , то внутри слайдер не начинает работать пока не свайпнешь его мышкой. В консоле просто у класса swiper slide отсутствуют классы active и next. Потом слайдер оживает и уже работает, если даже переключить таб. Даже функция observer не помогает до конца. Без неё вообще слайдер не работает. Вот спасибо на метод update. Думаю повесить его на кнопку таба и при переключении табов он и будет пробуждать слайдеры. А так уже 2й день голову ломаю в чем мог ошибиться при написании кода.

[@maxgraph]

ни в чем ошибки нет, просто внутри табов (пока блок скрыт) слайдер не может рассчитать размеры из ничего. Поэтому и нужен update()

[@Dim_Dimych21]

@@maxgraph Получилось, работает! Еще раз спасибо! )

[@seryozhamangushev9638]

Макс, что если нужен слайдер на декстопе в несколько рядов, а на мобильном в один ряд. Дело в том, что он требует задавать максимальную высоту фиксированную. Отсюда вопрос, как ее менять, если контента больше.

[@ivankrashevskyi3837]

Спасибо, помог в проекте))

[@maxgraph]

Пожалуйста)

[@senianga1]

Круто!

[@talivel118]

Классно было бы если ты поставил бы картинки в слайды, так понятней мне кажется..

[@igrrrra]

То, что надо!!! Прям лайк! лайк! лайк! Спасибо тебе!

[@maxgraph]

Рад помочь)

[@igrrrra]

Это лучшее видео про слайдеры, на ютубе! А я их, наверное, все пересмотрела. Так, что так держать!!!

[@maxgraph]

@@igrrrra стараюсь))

[@evgeniivavilo8678]

супер видео. спасибо

[@maxgraph]

Пожалуйста)

[@juliajuli1257]

Огроменное спасибо!!!))))))

[@Vitalynov]

Все очень понятно! Спасибо! Хотелось бы еще понять, как инициализировать Swiper-ы в табах? Очень просим.

[@maxgraph]

да также как обычно. но когда табы переключаем - просто вызываем update() у слайдера.

[@irinashm803]

Спасибо за это видео!

[@maxgraph]

Пожалуйста)

[@AlexanderShinigami]

Огнище!

[@maxgraph]

👍

[@Alexandr_16kz_22rus]

Дружище, огромная благодарность за ролик!!! Но есть вопрос: можно ли сделать слайдер, например, в два ряда по три слайда?

[@maxgraph]

Пожалуйста =) Да, конечно можно, есть настройка grid

[@toplemon8045]

Вместо события resize можно использовать функцию Matchmedia, несраванимо более производительна плюс больше читаемость и гибкость

[@TheQmast3r]

четко, то что нужно, спасибо

[@maxgraph]

Пожалуйста)

[@jhongolt6629]

Макс, привет. Выручил, пожалуйста. Каким микрофоном пользуешься? И обрабатывает ли ты звук? Спасибо.

[@maxgraph]

Привет! Tascam TM-80 Обрабатываю, да.

[@jhongolt6629]

Спасибо большое.

[@timshermatov5113]

Вообще красавчик))

[@maxgraph]

Спасибо)

[@andrew_tt]

Хм, никак не могу понять, почему не работает в моем случае swiper.update(). Нажимаю button, display меняется на block, слайдер появляется, но анимированного обновления в инструментах разработчика как на видео 53:39, так и не происходит - анимируется только display. В чем может быть причина, почему может не работать swiper.update()?

[@maksrygaev657]

ОГРОМНОЕ СПАСИБА ИУУУ

[@maxgraph]

Пожалуйста

[@АртурПирожков-э8ж]

Красава!!!!!!!!!

[@maxgraph]

Спасибо)

[@Olya-t5s]

Спасибо огромное. Подскажите, пожалуйста. Возможно ли позиционировать кнопки навигации относительно активного слайда? Например, на экране отображается одна полная картинка, а prev и next слайды чуть видны. Нужно расположить кнопки навигации относительно краев центральной картинки.

[@maxgraph]

Можно

[@sencorio]

Спасибо, очень своевременно! Видео отличается последовательностью и структурой - мне так намного легче воспринимать. Однако, названия разделов уж очень быстро исчезают, старался медленнее моргать))

[@maxgraph]

Мне казалось на монтаже, что медленнее - слишком медленно)) так что тут скорее вкусовщина..но учту на будущее) спасибо

[@sencorio]

@@maxgraph Наверно не совсем в тему, но все-таки.. Есть на сайте блок с изображениями. Нужно, чтоб по клику по любой картинке они открывались на весь экран (или очень крупно) и включался слайдер. Ну либо попеременно перещелкивать картинки для их увеличения. Как называется такой интерактив, может есть отдельный модуль, планируется ли на канале рассказ про такое?

[@maxgraph]

@@sencorio да, будет)

[@sergius_yo]

Всё супер!! Пересмотрел видео несколько раз:) У меня такая ситуация. Всё работает, но уменьшении размера экрана, проверка на адаптивность, стрелки свайпера не доходят до первого брейкпоинта (1200рх) . Т.е. кнопка next не помещается в контейнер и появляется вертикальный скролл справа. Это начинается где-то с 1230рх. В чём может быть проблема? Кнопки вынесены за пределы свайпер контейнера

[@anatolyannenko1821]

когда блок превращается в слайдер ошибка есть как мне кажется. Я делал window.innerWidth

[@Gerlinda137]

Здравствуйте, благодаря вам уже в трех проектах использовала этот плагин. Но каждый раз, когда хочу сделать слайдер со slidesPerView: auto все время одна и та же проблема, не прокручивается нормально вправо. Голову всю сломала, не знаю, как справиться.

[@volklin]

Спасибо за видео ! А можно ли сделать отложенную подгрузку картинок, если картинки лежат с разными размерами в ?

[@maxgraph]

Даже не пробовал

[@pavel7650]

Столкнулся с такой проблемой. Свайпер очень плохо работает с брейкпоинтами. Например, выставляешь на определенной ширине slidesPerView или centeredSlides и при изменении размеров экрана в инспекторе количество слайдов не меняется, а меняется только после перезагрузки страницы. Как можно пофиксить?

[@san4es1690]

Спасибо автору хороший контент получился. С меня лайк и подписка. По теме данного видео есть вопрос. Возможно ли сделать с помощью swiper три слайдера на одной странице. А именно - Первый слайдер это самый верх главной страницы 1 слайд на экране, есть только пагинация и автопрокрутка и фейд. Второй слайдер одновременно показывает 3 слайда. есть только автоплей. И третий слайдер - показ 1 слайда по очереди, есть только автоплей и пагинация. Второй день ищу способ. но рабочего не нашел, видимо что то в JS не так пишу. Проблема такая, каждый слайдер имеет свой класс, для того что бы все три слайдера выглядели по разному, первые два работают нормально, но при включении третьего, и активации кнопок навигации на нем, они (кнопки) почему то съезжают в верхний слайдер. Можно ли как то исправить. ведь навигация используется только последним слайдером. Параметры для каждого слайдера прописаны отдельно.

[@maxgraph]

Можно делать хоть 10 слайдеров) видимо где-то косяк в коде

[@artmertehin1529]

Спасибо вам за видео. Может сталкивались, как сделать, чтобы вертикальный полноэкранный слайдер становился freemode после последнего слайда и возвращался в freemode false, если скроллим опять вверх? есть событие reachEnd, на него можно подвязать freemode true. А как быть с возвращением к freemode false?

[@maxgraph]

даже не пробовал)

[@aleksius7819]

спасибо, подписался, хорошо рассказал.

[@maxgraph]

Спасибо!)

[@КириллСотников-б4ф]

Да! Слайдер крутой! Честно говоря наткнулся на видео - искал возможность реализации такого слайдера как у Яндекса - с free mode, и понятной физикой свайпа пальцем, думал - ну все - с этим Swipe JS решил проблему. Ан нет, free mode не совсем фри, происходит в конце движения слайда прилипание, не совсем плавная динамика ускорения в режиме фрии, и при резкой остановке слайда при свайпе - физика нарушает прогнозируемый отклик. Можешь подсказать - как реализовать (можно и в рамках Swipe) как реализовать слайдер например как у Яндекс Погоды...

[@maxgraph]

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

[@ВладимирЯрошенко-л6э]

Макс, спасибо большое за твой труд🤝 Все очень полезно! Жаль что не нашел ответа как применить swiper.updateSize(), как понимаю данный параметр помогает перезагрузить плагин чтобы размер контейнера перезагрузил размер, без него не адаптируется изображение💁‍♂ У меня картинка не адаптируется под размер контейнера.

[@maxgraph]

Возможно надо сделать дестрой, а потом заново запускать слайдер

[@ВладимирЯрошенко-л6э]

​@@maxgraph Макс, привет! Я нашел в чем у меня была ошибка, затупил🤦‍♂. В source media было указано наоборот. Т.Е прописал сначала 1024, 768, 320 это мне и не давало корректно поставить изображение😊 при адаптивен под мобильное устройство. Но про перезагрузку плагинов аккордеон, swiper было-бы интересно посмотреть. Не зря же в API разработчик указал параметр swiper.updateSize()

[@asgard1428]

Максим привет. А как сделать на fractio, а просто например 2 цифры. Например 2 слайдера и получается цифры 1 и 2?

[@maxgraph]

Не очень понял, о чем это))

[@asgard1428]

@@maxgraph разобрался уже. Маленькую функцию renderBullet нужно было вставить в свайпер

[@panya_indastreet]

а все классы, которые прописаны в документации, обязательны? Я имею ввиду wrapper, slide и тд?

[@maxgraph]

Да

[@antonchehov8693]

Расскажите пожалуйста как внутри слайдеров ставить тексты а также кнопки

[@boldureans]

Крутое видео! А если нужны и булеты внизу и цифры поверх слайдера?

[@maxgraph]

двойная пагинация в смысле? Это можно через кастомные события устроить.

[@boldureans]

@@maxgraph Да именно)

[@mykytaKob]

Скажите пожалуйста, а сложно сделать слайдер с превью, которое расположено под основной картинкой? Я имею ввиду горизонтальное превью

[@maxgraph]

Скоро выйдет видео марафона на эту тему)

[@anita_suska]

а у же есть видео со слайдером в нижнем углу экрана? очень нужно. расскажи сэнсей

[@ZoRTuL-p2n]

привет, спасбо за класное видео. Но у меня вопрос, как сделать анимцию переключения точек в пагинации.

[@maxgraph]

Просто стилями уже. Тут зависит от задачи

[@ZoRTuL-p2n]

@@maxgraph а в какие классы писать? Мне нужна анимация типа с точки течет к следующей точки, надеюсь понял

[@SegenAlexander]

спасибо, отлично показал все) было полезно) А подскажи, как сделать, чтобы в реализации с 3 слайдами, где средний на первом плане, сделать такое переключение/перелистывание, без стрелок, чтобы на каждый свайп было переключение на следующий слайд, и нельзя было перескочить через несколько. В том, что ты показал, можно зажать ЛКМ и перетянуть с 2 на 8 к примеру слайд... (в твоем видео это 7 слайдер)

[@maxgraph]

насчет свайпа не скажу, а насчет плана - можно по классу swiper-slide-active его менять. трансформ добавлять и т.д.

[@example6963]

Здравствуйте, а как показать порядковый номер слайда? Допустим есть 5 слайдов и их порядковые номера, при нажатии на которые открывается тот или иной слайд. Узнал что это один из способов пагинации, но все же как это можно сделать?

[@maxgraph]

Здравствуйте, если вас надо 1 из 5, то это есть в видео. А если просто номер слайда - можно смотреть на специальное событие (не помню точно название, ибо с телефона, вроде slideChange), и передавать в функцию индекс. Если не разберетесь пишите

[@example6963]

@@maxgraph нашел в документации вроде, чтобы это сделать нужен этот код var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', clickable: true, renderBullet: function (index, className) { return '' + (index + 1) + ''; }, }, }); Спасибо!)

[@ВасилисаПупкина-ю2ж]

Спасибо за отличный урок! Подскажите, пожалуйста, как использовать slidesPerColumn? Я хочу вставить 4 слайда, чтобы они располагались по 2 на строку и 2 на колонку. Когда они располагаются в одну строку, всё работает, но при попытке использования slidesPerColumn все съезжает.

[@maxgraph]

Особо с этим не работал, но у них на сайте есть демка по этому поводу: github.com/nolimits4web/Swiper/blob/master/demos/170-slides-per-column.html

[@ВасилисаПупкина-ю2ж]

@@maxgraph Так точно. Поковыряла документацию и нашла несколько решений, в т.ч. с адаптивом. Сейчас мучаюсь другим вопросом. В Вашем видео сказано, что при верстке нескольких слайдеров с одинаковыми классами не важно чтобы кнопки находились внутри слайдера. Но на практике оказалось, что если вынести кнопки за пределы слайдера, они становятся не кликабельными. А мне по дизайнерской задумке надобно вынести их немного за края. Да, есть лайфхак с padding, но в моем случае он не работает, ибо (по пока не выясненным обстоятельствам) слегка обнажает другие слайды, которых не должно быть видно. Мой вопрос в чем: а есть ли возможность сделать вынесенные кнопки кликабельными?

[@maxgraph]

@@ВасилисаПупкина-ю2ж Нет, наоборот я говорил, что кнопки не должны быть снаружи (возможно оговорился). Но и это можно решить, если в цикле еще и использовать какой-то индекс, и тогда у вас будут кнопки типа swiper-button-next-1, swiper-button-next-2 и т.д.

[@gromniki]

Отличное видео. Благодарю. Есть идея, как можно отображать одновременно и pagination и fraction? В доке нет такого варианта.

[@maxgraph]

Одну из них делать Кастомно, нагуглить можно)

[@gromniki]

@@maxgraph Спасибо. Попробую поискать

[@kras9763]

Здравствуйте, большое спасибо за видео, долго искал подобное. Но остался один вопрос. Как, например, в одном слайдере класс swiper-pagination-current сделать белым, а во втором этот же класс черным. Хотел дополнительный класс дописать, но в самой разметке такой строки нет, только через devtools видно. И получается, что двигаю в одном слайдере, двигается и во втором...

[@maxgraph]

Через вложенность классов можно же. Типа .class .swiper-pagination-current

[@kras9763]

@@maxgraph Спасибо, как обычно в трёх соснах заблудился)

[@xsage1536]

Можете подсказать каким образом можно выравнять слайдер по центру? У меня проблема заключается в том, что при уменьшении размера экрана у меня слева слайд стремится к центру

[@maxgraph]

centederSlides: true, вы про это?

[@xsage1536]

MaxGraph - cайты как страсть был слайдер , слайды в нем показывались на весь экран. С проблемой решил не парится, сделал большой spaceBetween и все готово, спасибо за урок!)

[@maxgraph]

Ну ладно :) не за что)

[@АлександрБуланов-о6к]

Привет Максим, у слайдера fotorama есть возможность по нажатию на кнопку перейти в полноэкранный режим, как это сделать на этом слайдере?

[@maxgraph]

Думаю только другой библиотекой

[@PashaYasha]

Ссылка на гитхаб не работает, можешь, пожалуйста, обновить? Или закинуть на какой-то файлообменник? Спасибо)

[@maxgraph]

Почему то не работает у вас данная ссылка, можно через впн попробовать 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 Вот обычная

[@PashaYasha]

@@maxgraph оо, спасибо большое) выручил))

[@yaroslavbox1249]

cool !

[@kuznetsovs]

Добрый день! Всё работает прекрасно, до той поры, пока не продублируешь слайдер, т.е. пока на странице один слайдер, всё работает прекрасно. Но всё ломается, если разместить несколько слайдеров. Подскажите пожалуйста, как сделать тоже самое, но с несколькими слайдерами на странице? Пробовал forEach перебирать все слайдеры. При ресайзе окна, точнее при уменьшении, всё работает, но при увеличении ругается на destroy(), соответственное обратно не срабатывает.

[@maxgraph]

Добрый вечер! Ну по сути надо дублировать код и просто называть переменные иначе. Но я наверное сделаю на эту тему отдельное видео

[@ПавелКардаш-м2щ]

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

[@maxgraph]

Здравствуйте, ну в видео же есть пример) посмотрите

[@ПавелКардаш-м2щ]

@@maxgraph видимо я упустил это, пересмотрю еще раз

[@miraigrafit7865]

Как сделать вертикальный слайдер высота которого равняется высоте контента слайда? Чтобы при изменении контента (к примеру, добавили больше текста) слайдер увеличивался по высоте, а то swiper везде пишет фикс. высоту и при добавлении все обрезается...

[@maxgraph]

надо пробовать) так наугад не знаю