Cлайдер с анимированным прогрессбаром на jQuery

4900

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

Пример работы слайдера

Главная особенность адаптивного слайдера – в центре размещено изображение в круглом блоке. Кроме того, в центре движется полоса таймера смены изображения, но не по прямой линии, а как бы огибая картинку сверху. Очень оригинально смотрится.

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

Скачать архив.

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

Кастомизация слайдера

Если вы хотите изменить размер центральной картинки, так чтобы анимация не пострадала, обратите внимание на 184, 185, 205 и 210 строки из файла index.js. Также вам понадобится изменить значения ширины и высоты блоков с классами circle, circle-1, circle-2, circle-3 из файла style.css.

Leave a Reply

B I PHP JS

Made with by CodyShop