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

 

Мы будем использовать плагины jQuery, для адаптивности и для возможности отзыва на сенсорных дисплеев. Кроме этого мы добавим несколько необходимых функций js. И так, давайте приступим.

Шаг 1. HTML

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

Для добавления нового изображения необходимо просто продублировать data-background, с указанным новым фоном, количество новых изображений подсчитает сам плагин и отобразит в навигации. Проще некуда.

Адаптивный полноэкранный слайдер для сайта_mini (1)

Шаг 2. JS

Мы будем использовать плагин flicker, который мы ранее уже подключили к нашему документу, чтобы его активировать, нам необходимо добавить следующую функцию:

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

Читайте также: