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

HTML разметка

У нас будет 5 слайдов. При желании, вы можете увеличить их число. Количество пунктов навигации должно совпадать с количеством слайдов.

Оформляем CSS стилями

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

Запускаем анимацию

Теперь осталось подключить javascript со следующим содержимым:

Важно! Наш скрипт должен размещаться после слайда, перед закрывающим тегом body. Переход от слайда к слайду осуществляется вручную. Если вы хотите запускать его автоматически, добавьте в конец следующий код:

Метки

Добавить комментарий