Гостевой вход

Вы не залогинились
00:52

Слайдер изображений на CSS с кнопками навигации

Категория: Слайдеры и слайдшоу

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


Просмотров: 231 | Скачиваний: 1 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

    605 Lightcase.js - респонсивный Lightbox на основе jQuery и SASS
    ( 13.12.2016 )
    Lightcase.js представляет собой мощный и гибкий плагин Lightbox для настольных компьютеров и мобильных устройств. Он использует CSS3 переходы, работает со сторонними ресурсами, поддерживает различные типы устройств, а также все современные браузеры, такие как Google Chrome, Mozilla Firefox, Opera, Internet Explorer 9+ и многие другие.
    530 Responsive jQuery Content Slider - полностью адаптивный слайдер с массой возможностей
    ( 25.09.2016 )
    Почему я должен пользоваться именно этим слайдером? - Полностью респонсивный - будет подстраиваться под любое устройство - Горизонтальная, вертикальная прокрутка слайдов, затухание - Слайды могут содержать изображение, видео, HTML-контент - Поддержка сенсорного управления, встроенный swipe-суппорт - Использует CSS-переходы для слайд-анимации (родное аппаратное ускорение!) - Полный обратный вызов API и публичные методы - Небольшой размер файла, полностью опирающийся на определённую тему, прост в реализации - Поддержка браузеров: Firefox, Chrome, Safari, IOS, Android, IE7 + - Тонны конфигурационных опций
    377 ResponsiveSlides.js - простой и легкий плагин респонсивного слайдера
    ( 25.09.2016 )
    ResponsiveSlides.js - крошечный плагин jQuery, позволяющий создать респонсивный слайдер с помощью элементов внутри контейнера. Используется на таких сайтах, как Microsoft's Build 2012 и Gridset App. Работает в широком диапазоне браузеров, включая все версии IE от IE6 и выше. Зависим лишь от jQuery (поддерживается версия от 1.6 и выше) и особенностью является одинаковый размер всех изображений.
    378 SlidesJS - многофункциональный слайдер для изображений
    ( 11.09.2016 )
    Не просто слайдер, а многофункциональный слайдер, в архиве вы найдёте примеры различного исполнения слайдера - от стандартного, до слайд-шоу с возможностью постановки на паузу прокрутки слайдов, использования эффектов при смене слайдов. Реализована возможность одновременного размещения нескольких слайдеров на странице сайта.
    273 jFlow Plus - компактный слайдер на jQuery
    ( 11.09.2016 )
    Неплохой слайдер изображений на jQuery, имеется функция слайд-шоу (по умолчанию включена), навигация доступна как стрелками вправо-влево, так и якорями-ссылками на каждый отдельный слайд. Для слайдов предусмотрен вывод подписей на полупрозрачном фоне с описанием к изображению. Вобщем, добротный, хороший слайдер, но - не адаптивный вариант.
    708 Адаптивный слайдер изображений на jQuery и CSS3
    ( 28.08.2016 )
    Очень стильный слайдер, всё гениальное просто! Ничего лишнего - навигация стрелками (довольно стильно оформленная кстати) продублирована маркерами. Есть возможность добавления подписей к изображениям. По умолчанию включено слайд-шоу, автоматическая прокрутка изображений.
    359 Ninja Slider: респонсивный слайдер (слайд-шоу) изображений
    ( 28.08.2016 )
    Отличный вариант слайдера с богатыми возможностями: здесь и слайд-шоу для слайдов, и расширение (увеличение) области слайдера по клику, возможность использования в слайдере контента, видео, аудио, поддержка галереи с превьюшками изображений, галереи с слайдером в окне лайтбокса , адаптивность, вобщем всё круто!
    306 Полноэкранный слайдер изображений на чистом CSS
    ( 28.08.2016 )
    Слайдер полноэкранных изображений, имеющий в качестве навигации ссылки-якоря в нижней части. В плане адаптивности не всё в порядке - при уменьшении рабочей области экрана, картинка не адаптируется.
    244 Анимированный SVG Hero слайдер
    ( 27.08.2016 )
    Полноценный полноэкранный респонсивный слайдер с эффектной сменой слайдов. Навигация в виде якорей-ссылок в нижней части.
    327 Цикличный слайдер изображений на CSS3
    ( 27.08.2016 )
    Стильный слайдер со слайд-шоу, в котором слайды меняются автоматически после того, как в нижней части полоса прогресса загрузки доходит до конца. При наведении мыши на изображение, полоса загрузки останавливается, также как и смена изображений, и появляется подпись к изображению.

Онлайн статистика

21.02.2018

Ср

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: