1. Адаптивный слайдер для сайта - Slick.js

preview_player
Показать описание

Из достоинств:
1. Он уже адаптивен.
2. Заточен под мобилки, смартфонки, планшетки и прочие приблуды :)
3. Имеет много интересных настроек, что позволяет вволю над ним поиздеваться.

Ссылки из видео:

==============================================
★★★ Реклама на канале: ★★★

★★★ Заработай на своем YouTube канале ★★★

Production Music courtesy of Epidemic Sound!

  1. CodexWeb (бывший Master-CSS)
  2. master-css
  3. михалевич сергей
  4. слайдер для сайта
  5. как установить слайдер slick.js
  6. адаптивный слайдер slick.js
Рекомендации по теме
1. Адаптивный слайдер 0:14:06

1. Адаптивный слайдер для сайта - Slick.js

2. Адаптивный слайдер 0:22:40

2. Адаптивный слайдер для сайта - Slick.js (настройки)

3. Адаптивный слайдер 0:20:59

3. Адаптивный слайдер для сайта - Slick.js

Адаптивный слайдер для 0:01:11

Адаптивный слайдер для вашего сайта

Адаптивный слайдер для 0:07:27

Адаптивный слайдер для сайта на чистом HTML, CSS

SLICK SLIDER - 1:02:58

SLICK SLIDER - лучший слайдер для сайта за 1 час. Подробный гайд. Подключение и настройка слайдера...

Сделать слайдер для 0:14:15

Сделать слайдер для сайта 1. Создание адаптивного сайта из PSD (1) HTML6 + CSS3 + JS. Урок 7.1...

Адаптивный слайдер - 0:40:31

Адаптивный слайдер - без знаний Javascript

Адаптивный слайдер на 0:23:24

Адаптивный слайдер на JavaScript

Owl Carousel | 0:06:52

Owl Carousel | Слайдер для сайта | Уроки | Адаптация слайдера под мобильные устройства | Урок №7...

Простои слайдер для 0:01:31

Простои слайдер для сайта на HTML, CSS и JavaScript

Классный CSS-слайдер для 0:13:31

Классный CSS-слайдер для сайта

Адаптивный слайдер на 0:00:43

Адаптивный слайдер на чистом JavaScript очень просто #Shorts

Owl Carousel | 0:21:41

Owl Carousel | Слайдер для сайта | Уроки | Работаем с изображениями | Урок №1...

Адаптивный слайдер 0:08:19

Адаптивный слайдер

Как сделать слайдер 0:09:48

Как сделать слайдер для сайта на Materialize CSS, Подробный видео курс по Materialize CSS #17...

Как сделать слайдер 0:00:56

Как сделать слайдер за минуту? - Swiper #HTML #CSS #SWIPER

Адаптивный слайдер на 0:16:52

Адаптивный слайдер на WordPress (Slider)

Простой слайдер за 0:00:59

Простой слайдер за 15 секунд 🔥ПОДПИСЫВАЙСЯ

Практика верстки #1. 0:36:53

Практика верстки #1. 8. Адаптация слайдера и футер на гридах...

Как добавить slick 0:34:53

Как добавить slick слайдер на сайт

Простой слайдер для 0:15:19

Простой слайдер для сайта

Как создать адаптивный 0:07:47

Как создать адаптивный слайдер на jquery

#5 Как сделать 0:05:39

#5 Как сделать адаптивный слайдер слайд-шоу на API Swiper.js

Комментарии
Автор

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

<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css"
</head>
<body>

<div class="your-class" >
<div><img src="images/sl10.jpg" alt=""></div>
<div><img src="images/sl10.jpg" alt=""></div>
<div><img src="images/sl10.jpg" alt=""></div>
</div>

<script type="text/javascript"

<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick();
});
</script>

</body>
</html>

ernestkozinets
Автор

2:35 - подключение
4:27 - html слайдера
7:37 - инициализация скрипта

shorohovvs
Автор

Если будете писать в брекитс, то сразу установите расширение Emmet, для ускоренного написания кода. В видео на 7:25 мастер нажимает TAB и получает полный список слайдеров с классами, стилями и заданными атрибутами. Без плагина так не получится. Я не знал просто парился, как так то думал, жал таб у себя и нечего). Качественный урок, иду дальше.

ДанилБалакшин-фъ
Автор

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

y.kliuchyk
Автор

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

АлексКрафт-ур
Автор

Добрый день, CodexWeb! Благодарю, - видео-гид по slick емкое и информативное.

anatol
Автор

С фотки и самокритики на 58 сек. ржал минут 15 )) Подписался на канал )

vincentvega
Автор

На седьмой минуте 25 секунде видео вы говорите нажимать кнопку таб, но у меня ничего не происходит, код написан в точности, как на видео, помогите

ДжонБайрон-рб
Автор

Привет! Спасибо за хороший урок! Сделал все как у тебя, но слайдер не работал. Потом заменил библиотеку jquery которая была у тебя на библиотеку от google и все заработало! =)

ИльяКретинин-ьж
Автор

Да! Продолжай! ) Давно хотел по нему обзор! )

raketa
Автор

Подскажите плиз, делаю все точь-в-точь, но текст и описание слайдов не показывает. меняю position класса sl__text на relative, все видно. Возвращаю absolute - текста не видно.

Dmitriy_Bear
Автор

А если картинки разного размера? А если неизвестен размер картинок?

Иван-ъци
Автор

Отличные видео. Спасибо!

Во время работы с данным слайдером возник следующий вопрос:
Не понятно откуда при установке появляется дополнительный слайд (последний) - пустой.
С учетом того, что дивов всего 5, а слайдов 6. При включение doted - показывает 6 точек.

Анализ элемента в коде показал следующее:
<p class="slick-slide slick-cloned slick-active data-slick-index="-1" aria-hidden="false" tabindex="-1"></p>

Очень жду подсказки по данному вопросу

АлександрКочуров-оя
Автор

о, мой любимый плагин для организации слайдера на сайте)))

loginov
Автор

Кто будет "мондернизировать" :)) вместе со мной - ставим лайк!

CodexWeb
Автор

Спасибо за полезный и информативный урок! Все получилось и прекрасно работает)))

giffy
Автор

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

НикитаЗацепин-ыю
Автор

Подскажите, что вы нажали, что у вас открылась палитра? Время 10:50 примерно)

ОксанаХанова-щэ
Автор

За урок, спасибо, но непонятно как сделать этот слайдер адаптивным, он проставляет размер слайда либо исходя из размера изображения либо, если для div в котором слайдер я самостоятельно указываю фиксированную ширину

mishajaglovskiy
Автор

у кого не получилось, нужно пере скриптом ДЖС вконце у БОДИ подключить еще jQuery Core. у меня все заработало.

Indigo
visit shbcf.ru