Главная » Каталог » Слайдеры и слайдшоу » ResponsiveSlides.js - простой и легкий плагин респонсивного слайдера

Слайдеры и слайдшоу

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
});
Обсуждение материала:
Комментариев: 0
avatar

Другие материалы:

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

    25.09.2016

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

    Комментарии: 0   Просмотры: 402

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

    11.09.2016

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

    Комментарии: 0   Просмотры: 301

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

    28.08.2016

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

    Комментарии: 0   Просмотры: 466

Хостинг от uCoz