Самый популярный адаптивный слайдер с точками (пагинацией) без библиотек на чистом JS.

No video

Самый популярный адаптивный слайдер с точками (пагинацией) без библиотек на чистом JS.

Рет қаралды 9,762

Күн бұрын

Ссылка на прошлый урок "самый простой слайдер": • Самый простой слайдер ...
Материалы урока: t.me/frontend_...
Чат Фронтендеров в Telegram (помощь новичкам): t.me/frontend_...
Если ты изучаешь HTML, CSS, JS, то тебе надо практиковаться!
В этом видео мы сделаем адаптивный слайдер с автоматическим перелистыванием для своего сайта, своими руками и без библиотек!
Подробное объяснение на практике.
Ребята, забыл упомянуть про автоматическое перелистывание слайдера((
Чтобы заработало, вставьте этот код ниже с фигурными скобками, он в файле с материалами есть, так что проходи скачивай!
Автоматическое перелистывание слайдов:
setInterval(()
nextSlide()
, 3000);
Удачи!

Пікірлер: 29

@UNSPOKEN_RONIN Жыл бұрын

Браво! Мне остаётся только похлопать, исходя из данных объяснений, я узнал куда лучше JS и логику создания слайдера👍

@ilyaryssev0909 2 ай бұрын

Одно из немногих и классных объяснений написания сценария для слайдера (карусели)👍👏. Но при адаптиве мне кажется лучше использовать функцию clamp()

@user-sg7dn9wz2r 8 ай бұрын

Это самое крутое объяснение на youtube. Особенно адаптивность, на нее мало кто обращает внимание в плане resize. Может будет когда-нибудь возможность и желание дополнить этот слайдер автоматическим перелистыванием, причем индикатор (прогресс) должен заполняться по мере истечения интервала, и функция перелистывания, а также заполнение прогресс-бара должны останавливаться при наведении курсора на слайдер.

@Alexandr-G Жыл бұрын

У тебя формула по отзывчивому адаптиву оказалась точнее, чем у фрилансера по жизни, не знаю списал ты её или дощитался но нашёл я её у тебя.

@izyumka Жыл бұрын

урааааа, спасибо, я уже с этим слайдером голову поломала, а тут супер четкое объяснение, классная формула адаптива и логика показана и рассказана, отличная подача материала, спасибо

@zemlya Жыл бұрын

от души ты просто душка мне нужен был слайдер для курсовой точно такой же спасибо большое что ты есть подписалась

@MeruertA Жыл бұрын

спасибо большое, за подробный обзор, я вместо. transform использовала scrollLeft тоже получилось, рада прям)

@user-jt3hy6ym8w Жыл бұрын

Очень нравится как вы объясняете, особенно хочу отметить, как вы показываете, что работает, что мы сделали, а остальное в комментах. Продолжайте пожалуйста записывать про js, если будет время можете сделать все свойства и все методы js.

@Drab-vq9bt Жыл бұрын

Уже жду следующее видео!😉

@frontend_case Жыл бұрын

Спасибо)

@justfisher2920 Жыл бұрын

Формула адаптива огонь, четкий разбор алгоритма слайдера и небольшой код, мне всё зашло. Спасибо за подачу, жму правую до хруста👍🤝💪

@frontend_case Жыл бұрын

Спасибо)

@user-tn5ez4ei3m Жыл бұрын

Спасибо, очень доходчиво и интересно объяснили!

@user-co5yn9op3f Жыл бұрын

Спасибо огромное за хороший слайдер. Скачал код к себе

@user-co5yn9op3f Жыл бұрын

И подписался на канал

@CatWoman-sr4pk Жыл бұрын

отличное видео! спасибо большое!

@x-diz 25 күн бұрын

Всё хорошо, всё получилось. Пытался всё конспектировать (комментировать). Вот автоматическая прокрутка не очень нужна. А вот листание мышью по слайду. А? И перемотку по кругу, а не от края до края. Был бы вообще законченный вид. И точно не нужны будут библиотеки. Хотя я уже и так и так сделал. Даже вместо dot (квадратов) вставил миниатюры фоток. Гы. Завтра их подгоню посимпатичней. И будет как из библиотеки )))

@Mozobretenie 4 ай бұрын

Круто, но только есть один ньюанс, там где фкункция вызывается вы говорите что она определяется - это в корне не правильно, определяется она в другом месте, а там где ее нужно исполнить - это вызов, то есть когда пишем круглые скобки типа rollSlider()

@krypton5204 Жыл бұрын

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

@user-co5yn9op3f Жыл бұрын

Забыл кстати рассказать о автоперелистывании

@frontend_case Жыл бұрын

Да, в описании видео добавил и в исходниках к видео есть этот код.

@user-co5yn9op3f Жыл бұрын

@@frontend_case а, хорошо тогда Спасибо!

@annad.9873 6 ай бұрын

Огромное спасибо. Очень помогло видео. Но что делать, если на странице несколько однотипных слайдеров разного размера? Не писать же код под каждый.

@annador5880 10 ай бұрын

.slider__wrapper { position: relative; margin: 0 0 20px 0; padding: 0 0 58% 0; overflow: hidden; transition: all 1s; } .slider__img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; } - адаптивные картинки в слайдере на чистом css, без расчетов ширины и без js

@gremlen7225 Жыл бұрын

Можно ли как-то сделать чтобы одновременно показывалось несколько слайдов и при изменении размера экрана количество слайдов менялось?

@yuraivanov5197 9 ай бұрын

Автор или кто нибудь подскажите пожалуйста, как из этого слайдера сделать не зацикленный слайдер

@user-jc5ck5ph5t Жыл бұрын

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

@iarde3422 8 ай бұрын

Очень хорошо, только вы взглатываете постоянно и это очень хорошо слышно и с определённой периодичностью происходит. Сильно отвлекает от восприятия и через определённое время, начинает раздражать.