Наверное не только мне удобней листать объекты на сайте при помощи клавиатуры, управление мышкой это безусловно здорово, но нужно давать пользователю максимальное удобство на вашем сайте. Сегодня мы бы хотели поговорить о том, как реализовать управление слайдов на сайте при помощи стрелок клавиатуры, поможет нам в этом небольшой плагин jQuery. Используйте кнопки навигации или стрелки клавиатуры для прокрутки индикатора при переключении между слайдами. При разработке были вдохновлены интерфейсом iOS — uipickerview.

 

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

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

Шаг 1. HTML

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

Создайте неупорядоченный список html и укажите связанные изображения с помощью атрибута data-img-bg:

Теперь создаем кнопки навигации, которые помогут нам в управлении:

C разметкой мы разобрались, думаю у вас не возникнут трудности, давайте двигаться дальше.

Шаг 2. CSS

Мы использовали набор стилей, они нам нужны были для создания демонстрации, полный список классов вы можете найти в файле base.css:

Шаг 3. Библиотеки

Последним шагом станет подключения библиотек с кодом js, вставьте следующий код в конце вашего документа:

В результате у нас получился такой замечательный слайдер которым можно управлять при помощи клавиатуры, думаю ваши посетители оценят.

Вот и все. Готово!