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

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ม.ค. 2025

ความคิดเห็น • 377

  • @JuiSosu
    @JuiSosu ปีที่แล้ว +1

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

    • @maxgraph
      @maxgraph  ปีที่แล้ว

      Спасибо)

  • @Кемаль-я9е
    @Кемаль-я9е 4 ปีที่แล้ว +1

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Пожалуйста)

  • @one-zero-dev
    @one-zero-dev ปีที่แล้ว +2

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

  • @peterparker3794
    @peterparker3794 3 ปีที่แล้ว +3

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

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

  • @ЮрийКулясов-у2т
    @ЮрийКулясов-у2т 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Пожалуйста)

  • @mefioz2397
    @mefioz2397 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Пожалуйста)

  • @vzrosly_muzik
    @vzrosly_muzik 4 ปีที่แล้ว +6

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      спасибо)

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

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

  • @ivan.tsybko
    @ivan.tsybko 4 ปีที่แล้ว +20

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

    • @максим-м9ж5э
      @максим-м9ж5э 2 ปีที่แล้ว +1

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

  • @olehua7602
    @olehua7602 ปีที่แล้ว

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

  • @ТатьянаГерасимова-л8э
    @ТатьянаГерасимова-л8э 3 ปีที่แล้ว +1

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Здорово)

    • @ТатьянаГерасимова-л8э
      @ТатьянаГерасимова-л8э 3 ปีที่แล้ว

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

  • @belovmihan
    @belovmihan 3 หลายเดือนก่อน

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

    • @maxgraph
      @maxgraph  3 หลายเดือนก่อน +1

      Пожалуйста)

  • @0xlex695
    @0xlex695 4 ปีที่แล้ว +6

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว +1

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

  • @ЮрійДмитрик-в9в
    @ЮрійДмитрик-в9в 3 ปีที่แล้ว +1

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว +1

      Пожалуйста)

  • @artemrepin1746
    @artemrepin1746 ปีที่แล้ว

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

  • @a.k.9386
    @a.k.9386 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Здорово))

  • @Denik-is6gi
    @Denik-is6gi 2 ปีที่แล้ว

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

  • @yaninapihal6325
    @yaninapihal6325 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Спасибо)

  • @tonit2237
    @tonit2237 4 ปีที่แล้ว +2

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Спасибо)

  • @alessiorichter3634
    @alessiorichter3634 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  ปีที่แล้ว

      Спасибо)

  • @kirillsander4607
    @kirillsander4607 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      спасибо)

  • @МаксимСергеевич-п2б
    @МаксимСергеевич-п2б 3 ปีที่แล้ว +3

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

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

  • @davidfromnorth7836
    @davidfromnorth7836 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว +1

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

  • @realjones
    @realjones 4 ปีที่แล้ว +1

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      спасибо)

  • @evgeniyk4850
    @evgeniyk4850 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Пожалуйста)

  • @ДенисПодберезных
    @ДенисПодберезных 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Рад помочь)

  • @crafters2454
    @crafters2454 ปีที่แล้ว

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

  • @Expertdog
    @Expertdog 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Спасибо)

  • @Anatoli-bq1pe
    @Anatoli-bq1pe ปีที่แล้ว

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

  • @andrew_tt
    @andrew_tt 5 หลายเดือนก่อน

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

  • @ВадимБогданов-й1ч
    @ВадимБогданов-й1ч 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

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

  • @Sergey_Klimov
    @Sergey_Klimov 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Пожалуйста)

  • @robertvaksman2033
    @robertvaksman2033 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Пожалуйста)

  • @vanityzzz3114
    @vanityzzz3114 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Пожалуйста)

  • @talivel118
    @talivel118 3 ปีที่แล้ว +2

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

  • @detro1821
    @detro1821 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Спасибо))

  • @PRO-vr1pm
    @PRO-vr1pm 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Пожалуйста)

  • @alexandrgusletsov2567
    @alexandrgusletsov2567 4 ปีที่แล้ว

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

  • @Gerlinda137
    @Gerlinda137 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Спасибо)

    • @Gerlinda137
      @Gerlinda137 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว +1

      Можете)

  • @anikinae
    @anikinae 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Спасибо)

  • @toplemon8045
    @toplemon8045 2 ปีที่แล้ว +1

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

  • @АнастасияБелова-р6с
    @АнастасияБелова-р6с 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Пожалуйста)

  • @k0pernik91
    @k0pernik91 4 ปีที่แล้ว

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

  • @anatolyannenko1821
    @anatolyannenko1821 ปีที่แล้ว

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

  • @antonchehov8693
    @antonchehov8693 2 ปีที่แล้ว

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

  • @juliajuli1257
    @juliajuli1257 4 ปีที่แล้ว +1

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

  • @xoxo2880808
    @xoxo2880808 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Пожалуйста)

  • @Vitalynov
    @Vitalynov 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว +1

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

  • @dzmitrykubarski1462
    @dzmitrykubarski1462 4 ปีที่แล้ว

    Супер! Спасибо вам огромное)

  • @kasparsburvis7371
    @kasparsburvis7371 4 ปีที่แล้ว +1

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

  • @ВадимНазаров-д7з
    @ВадимНазаров-д7з 4 ปีที่แล้ว

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

  • @igrrrra
    @igrrrra 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Рад помочь)

    • @igrrrra
      @igrrrra 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

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

  • @seryozhamangushev9638
    @seryozhamangushev9638 3 ปีที่แล้ว +1

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

  • @elif.3258
    @elif.3258 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Пожалуйста)

  • @sergeypeksymov6549
    @sergeypeksymov6549 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Пожалуйста)

  • @Успешныелюди-ф1ь
    @Успешныелюди-ф1ь 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

  • @Dim_Dimych21
    @Dim_Dimych21 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว +1

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

    • @Dim_Dimych21
      @Dim_Dimych21 3 ปีที่แล้ว

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

  • @ivankrashevskyi3837
    @ivankrashevskyi3837 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Пожалуйста)

  • @ВадимБекмансуров
    @ВадимБекмансуров 2 ปีที่แล้ว

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

  • @Gerlinda137
    @Gerlinda137 4 ปีที่แล้ว

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

  • @pavel7650
    @pavel7650 2 ปีที่แล้ว

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

  • @svet0v
    @svet0v 4 ปีที่แล้ว +2

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว +1

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

  • @Evgeny1996
    @Evgeny1996 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  ปีที่แล้ว +1

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

  • @alexdenuke
    @alexdenuke 2 ปีที่แล้ว

    Если вам нужны несколько слайдеров и допустим с разными параметрами, то надо получить массив этих слайдеров и обращаться к ним по порядковому номеру например

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

      Не увидел в апи условия про это. Но так даже удобнее

  • @irinashm803
    @irinashm803 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Пожалуйста)

  • @TheQmast3r
    @TheQmast3r 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Пожалуйста)

  • @mykhailo6062
    @mykhailo6062 4 ปีที่แล้ว +1

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว +1

      Пожалуйста)

  • @Olya-t5s
    @Olya-t5s ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  ปีที่แล้ว

      Можно

  • @aleksius7819
    @aleksius7819 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Спасибо!)

  • @sergius_yo
    @sergius_yo 2 ปีที่แล้ว

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

  • @evgeniivavilo8678
    @evgeniivavilo8678 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Пожалуйста)

  • @anita_suska
    @anita_suska 3 ปีที่แล้ว

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

  • @senianga1
    @senianga1 ปีที่แล้ว

    Круто!

  • @danevgen
    @danevgen 4 ปีที่แล้ว +4

    Было бы здорово, если бы код был более крупным шрифтом

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Учту на будущее :) спасибо

  • @ВсеволодКарпиков
    @ВсеволодКарпиков 4 ปีที่แล้ว

    кстати, слайдер Tiny Slider идеально работает в режиме вертикального слайдера. подстраивается под высоту каждого слайда

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Надо посмотреть)

  • @ДенисДоровских-я2с
    @ДенисДоровских-я2с 3 ปีที่แล้ว +1

    скиньте плизз сюда ссылку на локальные файлы для Swiper ))

  • @СветланаГруздева-л7ю
    @СветланаГруздева-л7ю 10 หลายเดือนก่อน

    А как можно вывести кол-во показываемых слайдов и общее кол-во (вот так - 6/12)?

    • @maxgraph
      @maxgraph  10 หลายเดือนก่อน

      fraction pagination в доке смотрите

  • @maksrygaev657
    @maksrygaev657 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Пожалуйста

  • @ЛюдмилаСкирда-о4ш
    @ЛюдмилаСкирда-о4ш หลายเดือนก่อน

    Салют! благодарю за ваши ролики, очень помогают! Подскажите плиз, в чем может быть ошибка? Слайдер работает всегда и при "window.innerWidth

    • @maxgraph
      @maxgraph  หลายเดือนก่อน

      Здравствуйте. Ну тут надо смотреть код

  • @sencorio
    @sencorio 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว +1

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

    • @sencorio
      @sencorio 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

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

  • @ZoRTuL-p2n
    @ZoRTuL-p2n ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  ปีที่แล้ว +1

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

    • @ZoRTuL-p2n
      @ZoRTuL-p2n ปีที่แล้ว

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

  • @dexterdragons
    @dexterdragons 4 ปีที่แล้ว

    hey, gallery filterable prev, next & pagination?

  • @artmertehin1529
    @artmertehin1529 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

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

  • @timshermatov5113
    @timshermatov5113 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Спасибо)

  • @example6963
    @example6963 4 ปีที่แล้ว +1

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

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

    • @example6963
      @example6963 4 ปีที่แล้ว

      @@maxgraph нашел в документации вроде, чтобы это сделать нужен этот код

      var swiper = new Swiper('.swiper-container', {
      pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet: function (index, className) {
      return '' + (index + 1) + '';
      },
      },
      });
      Спасибо!)

  • @miraigrafit7865
    @miraigrafit7865 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว +1

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

  • @Eeegyfddgjjiii
    @Eeegyfddgjjiii 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Ну тут смотреть надо, сложно угадать

  • @nitron080
    @nitron080 3 ปีที่แล้ว

    А можно сделать на нем список кнопок просто слова в колонку а справа от них картинка которая переключается когда кликаешь по словам?

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Да можно)

  • @kuznetsovs
    @kuznetsovs 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

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

  • @ohwooow1223
    @ohwooow1223 4 ปีที่แล้ว

    Спасибо тебе :)

  • @AlexanderShinigami
    @AlexanderShinigami 2 ปีที่แล้ว

    Огнище!

  • @xsage1536
    @xsage1536 4 ปีที่แล้ว +1

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว +1

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

    • @xsage1536
      @xsage1536 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

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

  • @asgard1428
    @asgard1428 2 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  2 ปีที่แล้ว

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

    • @asgard1428
      @asgard1428 2 ปีที่แล้ว

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

  • @mrpllaser9645
    @mrpllaser9645 ปีที่แล้ว

    Что делать если свойство transform: scale(1.1); не работает? браузер зачеркивает его

    • @maxgraph
      @maxgraph  ปีที่แล้ว

      Нужно смотреть причины

  • @Сергей_Бирюков
    @Сергей_Бирюков ปีที่แล้ว

    Как правильно при ховере менять цвет кнопок переключения?

    • @maxgraph
      @maxgraph  ปีที่แล้ว

      зависит от того как сделаны кнопки

  • @volklin
    @volklin 3 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

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

  • @vitaliisyvashchenko7641
    @vitaliisyvashchenko7641 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Тут можно на css постараться, через транзишн.

  • @АлександрБуланов-о6к
    @АлександрБуланов-о6к 4 ปีที่แล้ว

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

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

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

  • @darkstyle7000
    @darkstyle7000 4 ปีที่แล้ว

    Подскажите пожалуйста, как добавить ещё слайдеры в эту функцию, чтобы на мобилке блоки становились слайдером

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Да точно также как и остальные

  • @Чебугена
    @Чебугена 3 ปีที่แล้ว

    Почему-то при сужении экрана все срабатывает как надо, а при расширении слайды пропадают и названия классов остаются свайперовские (в инспекторе)

    • @maxgraph
      @maxgraph  3 ปีที่แล้ว

      Так уж работает свайпер)

  • @АлексейГ-ц9ю
    @АлексейГ-ц9ю 4 ปีที่แล้ว

    просьба сделать видео по беспроблемному перелистыванию вертикальных тумб в слайдере №9

    • @maxgraph
      @maxgraph  4 ปีที่แล้ว

      Записал себе в планы, спасибо.