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

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

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

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

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



Особенности

- Полностью респонсивный
- Весит всего 1кб в уменьшенной и зазипованной версии
- Имеет CSS3 переходы с JavaScript в качестве запасного варианта
- Простая разметка с использованием маркированного списка
- Настройки для перехода и тайм-аута длительности
- Поддерживается несколько слайд-шоу
- Автоматическое и ручное затухание
- Работает во всех основных настольных и мобильных браузерах
- Титры и другие HTML-элементы поддерживаются внутри слайдов
- Отдельная нумерация страниц и контроль следующего / предыдущего слайдов
- Возможность выбора, где добавлять элементы управления
- Возможность рандомизировать порядок слайдов
- Возможность использовать собственную разметку для пагинации
- Слайд-шоу может быть приостановлено при наведении и / или элементами управления
- Изображения могут быть обернуты внутри ссылки
- Дополнительно "до" и "после" обратные ссылки

Подключаемые ссылки:

Код

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>


Разметка:

Код

<ul class="rslides">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
</ul>


CSS-стили

Код

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }


Подключение слайд-шоу:

Код

<script>
  $(function() {
  $(".rslides").responsiveSlides();
  });
</script>


Опции и настраиваемые параметры:

Код

$(".rslides").responsiveSlides({
  auto: true, // Boolean: Animate automatically, true or false
  speed: 500, // Integer: Speed of the transition, in milliseconds
  timeout: 4000, // Integer: Time between slide transitions, in milliseconds
  pager: false, // Boolean: Show pager, true or false
  nav: false, // Boolean: Show navigation, true or false
  random: false, // Boolean: Randomize the order of the slides, true or false
  pause: false, // Boolean: Pause on hover, true or false
  pauseControls: true, // Boolean: Pause when hovering controls, true or false
  prevText: "Previous", // String: Text for the "previous" button
  nextText: "Next", // String: Text for the "next" button
  maxwidth: "", // Integer: Max-width of the slideshow, in pixels
  navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "", // Selector: Declare custom pager navigation
  namespace: "rslides", // String: Change the default namespace used
  before: function(){}, // Function: Before callback
  after: function(){} // Function: After callback
});

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

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

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

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

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

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

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

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

    277 Полноэкранный слайдер изображений на чистом CSS
    ( 28.08.2016 )
    Слайдер полноэкранных изображений, имеющий в качестве навигации ссылки-якоря в нижней части. В плане адаптивности не всё в порядке - при уменьшении рабочей области экрана, картинка не адаптируется.

    224 Анимированный SVG Hero слайдер
    ( 27.08.2016 )
    Полноценный полноэкранный респонсивный слайдер с эффектной сменой слайдов. Навигация в виде якорей-ссылок в нижней части.

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

    229 Слайдер изображений в виде меняющихся подложек
    ( 27.08.2016 )
    Довольно круто! Слайдер как слоёный пирог) состоит из нескольких изображений, расположенных одно за другим. При нажатии на стрелку влево или вправо, изображения расступаются в стороны, чтобы затем собраться вновь в одну стопку, сверху которой будет выбранное изображение.

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

24.01.2018

Ср

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

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