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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      vertical: true,

      verticalSwiping: true,