Отличный адаптивый слайдер для сайта.

Отличный адаптивый слайдер для сайта.

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

Привет друзья! Сегодня я хочу подарить вам 3 видео урока, в которых мы познакомимся с замечательным скриптом Slick.js

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

Тренинг по вёрстке сайта на HTML5 и CSS3

Если вы пройдёте вместе со мной все три урока – вот, какая штука получится у вас в итоге.

Демо слайдера

Всего 3 занятия по продолжительности занимают менее часа, так что за вечер вы легко управитесь. БАНЗАЙ! smile

Урок 1. Установка адаптивного слайдера.

Здесь мы не только установим слайдер, но и немножко украсим его содержимое. Заведём картинки и каждой дадим название и описание.

1. Скрипт слайдера slick.js

2. Ссылка на архив заготовки с картинками

Урок 2. Настройка адаптивного слайдера.

Здесь тупо настройки. Урок получился длинный, так как их действительно ОЧЕНЬ много. grrr

Урок 3. Модернизация слайдера Slick.js

Здесь мы сделаем ещё один слайдер, и заставим оба слайдера работать в паре. А также – займёмся стилизацией элементов анимации.

На этом всё. Если будут вопросы по слайдеру Slick.js – задавайте их в комментариях.

Комментариев: 4 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 4
  •  Алексей | 7 ноября 2016 в 10:11:20

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

    •  Gikk | 13 февраля 2017 в 20:28:30

      Если похимичить над кодом то можно)

    •  Andrew | 5 апреля 2017 в 14:10:03

      vertical: true,

      verticalSwiping: true,

  •  Дмитрий | 25 июля 2017 в 18:00:33

    Здравствуйте. Спасибо за подробную инфу по слайдеру.

    Подскажите, возможно ли в даном Slick слайдере, чтобы при проигрывании по особому менялись картинки? Допустим, есть 9 картинок трёх разных тематик, пускай будет столы, стулья, кровати, т.е. по 3 картинки на каждую тему. По текущему алгоритму сначала показывается картинка столы, потом стулья, следом кровати, потом снова повторяется с той же картинки столы...

    И вот как сделать, чтобы далее при повторении цикла показывалась другая картинка столы, потом другая картинка стулья, следом другая картинка кровати и т.д. При этом чтобы точек "dots" под слайдером было тоже 3.

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

    Возможно ли так сделать с дописыванием кода событий и ещё как?