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

Вы не залогинились
22:54

Responsive jQuery Content Slider - полностью адаптивный слайдер с массой возможностей

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

Метки: слайдер изображений, слайдер контента, респонсивный слайдер, слайд-шоу изображений
Почему я должен пользоваться именно этим слайдером?
- Полностью респонсивный - будет подстраиваться под любое устройство
- Горизонтальная, вертикальная прокрутка слайдов, затухание
- Слайды могут содержать изображение, видео, HTML-контент
- Поддержка сенсорного управления, встроенный swipe-суппорт
- Использует CSS-переходы для слайд-анимации (родное аппаратное ускорение!)
- Полный обратный вызов API и публичные методы
- Небольшой размер файла, полностью опирающийся на определённую тему, прост в реализации
- Поддержка браузеров: Firefox, Chrome, Safari, IOS, Android, IE7 +
- Тонны конфигурационных опций



Как установить

Шаг 1: подключение необходимых файлов

Код

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />


Шаг 2: создание HTML-разметки

Код

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>


Шаг 3: вызов bxSlider

Код

$(document).ready(function(){
  $('.bxslider').bxSlider();
});


Для получения дополнительной информации по установке и настройке перейдите в примеры и часто задаваемые вопросы.

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

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

    Lightcase.js - респонсивный Lightbox на основе jQuery и SASS

    Lightcase.js представляет собой мощный и гибкий плагин Lightbox для настольных компьютеров и мобильных устройств. Он использует CSS3 переходы, работает со сторонними ресурсами, поддерживает различные типы устройств, а также все современные браузеры, такие как Google Chrome, Mozilla Firefox, Opera, Internet Explorer 9+ и многие другие.

    ResponsiveSlides.js - простой и легкий плагин респонсивного слайдера

    ResponsiveSlides.js - крошечный плагин jQuery, позволяющий создать респонсивный слайдер с помощью элементов внутри контейнера. Используется на таких сайтах, как Microsoft's Build 2012 и Gridset App. Работает в широком диапазоне браузеров, включая все версии IE от IE6 и выше. Зависим лишь от jQuery (поддерживается версия от 1.6 и выше) и особенностью является одинаковый размер всех изображений.

    SlidesJS - многофункциональный слайдер для изображений

    Не просто слайдер, а многофункциональный слайдер, в архиве вы найдёте примеры различного исполнения слайдера - от стандартного, до слайд-шоу с возможностью постановки на паузу прокрутки слайдов, использования эффектов при смене слайдов. Реализована возможность одновременного размещения нескольких слайдеров на странице сайта.

    jFlow Plus - компактный слайдер на jQuery

    Неплохой слайдер изображений на jQuery, имеется функция слайд-шоу (по умолчанию включена), навигация доступна как стрелками вправо-влево, так и якорями-ссылками на каждый отдельный слайд. Для слайдов предусмотрен вывод подписей на полупрозрачном фоне с описанием к изображению. Вобщем, добротный, хороший слайдер, но - не адаптивный вариант.

    Адаптивный слайдер изображений на jQuery и CSS3

    Очень стильный слайдер, всё гениальное просто! Ничего лишнего - навигация стрелками (довольно стильно оформленная кстати) продублирована маркерами. Есть возможность добавления подписей к изображениям. По умолчанию включено слайд-шоу, автоматическая прокрутка изображений.

    Ninja Slider: респонсивный слайдер (слайд-шоу) изображений

    Отличный вариант слайдера с богатыми возможностями: здесь и слайд-шоу для слайдов, и расширение (увеличение) области слайдера по клику, возможность использования в слайдере контента, видео, аудио, поддержка галереи с превьюшками изображений, галереи с слайдером в окне лайтбокса , адаптивность, вобщем всё круто!

    Анимированный SVG Hero слайдер

    Полноценный полноэкранный респонсивный слайдер с эффектной сменой слайдов. Навигация в виде якорей-ссылок в нижней части.

    Цикличный слайдер изображений на CSS3

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

    Стильный слайдер изображений / меню навигации

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

    Простой слайдер изображений на jQuery и CSS

    Очень стильный слайдер. Имеет функцию слайд-шоу (включена по умолчанию). Присутствует навигация в виде красиво оформленных стрелок - они есть, но не бросаются в глаза, не отвлекает внимание. Окно слайдера имеет стильные тени снизу, отбрасываемые как бы загнутыми уголками листа.

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

18.11.2017

Суббота

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

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