Карусель изображений Feature Carousel

Feature carousel

~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~Плагин Feature Carousel прекрасно подойдет для ключевых презентационных блоков на сайте. Отображение виджета весьма гибко настраивается.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~link rel="stylesheet" href="/plagins/featureCarousel/feature-carousel.css" charset="utf-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/featureCarousel/jquery.featureCarousel.min.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    #carousel{width:100%; background-color:white;}
    #carousel-left, #carousel-right{bottom:150px}
    .tracker-individual-container{top:173px}
    .tracker-summation-container{top:193px}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="carousel"~gt~
    ~lt~div class="carousel-feature"~gt~
      ~lt~a href="#"~gt~~lt~img class="carousel-image" alt="Image Caption" src="/plagins/featureCarousel/images/sample1.jpg"~gt~~lt~/a~gt~
      ~lt~div class="carousel-caption"~gt~
        ~lt~p~gt~
          Этот виджет подойдет для презентационных областей на сайте.
        ~lt~/p~gt~
      ~lt~/div~gt~
    ~lt~/div~gt~
    ~lt~div class="carousel-feature"~gt~
      ~lt~a href="#"~gt~~lt~img class="carousel-image" alt="Image Caption" src="/plagins/featureCarousel/images/sample2.jpg"~gt~~lt~/a~gt~
      ~lt~div class="carousel-caption"~gt~
        ~lt~p~gt~
          Он поочередно демонстрирует один из нескольких заданных иллюстраций с комментариями или без них.
        ~lt~/p~gt~
      ~lt~/div~gt~
    ~lt~/div~gt~
    ~lt~div class="carousel-feature"~gt~
      ~lt~a href="#"~gt~~lt~img class="carousel-image" alt="Image Caption" src="/plagins/featureCarousel/images/sample3.jpg"~gt~~lt~/a~gt~
      ~lt~div class="carousel-caption"~gt~
        ~lt~p~gt~
          Можно настроить виджет, чтобы текущий слайд работал как ссылка.
        ~lt~/p~gt~
      ~lt~/div~gt~
    ~lt~/div~gt~
    ~lt~div class="carousel-feature"~gt~
      ~lt~a href="#"~gt~~lt~img class="carousel-image" alt="Image Caption" src="/plagins/featureCarousel/images/sample4.jpg"~gt~~lt~/a~gt~
    ~lt~/div~gt~
    ~lt~div class="carousel-feature"~gt~
      ~lt~a href="#"~gt~~lt~img class="carousel-image" alt="Image Caption" src="/plagins/featureCarousel/images/sample5.jpg"~gt~~lt~/a~gt~
    ~lt~/div~gt~
  ~lt~/div~gt~
    
  ~lt~div id="carousel-left"~gt~~lt~img src="/plagins/featureCarousel/images/arrow-left.png" /~gt~~lt~/div~gt~
  ~lt~div id="carousel-right"~gt~~lt~img src="/plagins/featureCarousel/images/arrow-right.png" /~gt~~lt~/div~gt~
  ~lt~script~gt~
    $("#carousel").featureCarousel({
      largeFeatureWidth:0.5,
      largeFeatureHeight:0.5,
      smallFeatureWidth:0.25,
      smallFeatureHeight:0.25
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Отключение управляющих эл-в~lt~/tit~gt~
~lt~coment~gt~При необходимости, все или некоторые управляющие элементы можно отключить в настройках.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~link rel="stylesheet" href="/plagins/featureCarousel/feature-carousel.css" charset="utf-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/featureCarousel/jquery.featureCarousel.min.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    #carousel{width:100%; background-color:white;}
    #carousel-left, #carousel-right{bottom:150px}
    .tracker-individual-container{top:173px}
    .tracker-summation-container{top:193px}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="carousel"~gt~
    ~lt~div class="carousel-feature"~gt~
      ~lt~a href="#"~gt~~lt~img class="carousel-image" alt="Image Caption" src="/plagins/featureCarousel/images/sample1.jpg"~gt~~lt~/a~gt~
      ~lt~div class="carousel-caption"~gt~
        ~lt~p~gt~
          Этот виджет подойдет для презентационных областей на сайте.
        ~lt~/p~gt~
      ~lt~/div~gt~
    ~lt~/div~gt~
    ~lt~div class="carousel-feature"~gt~
      ~lt~a href="#"~gt~~lt~img class="carousel-image" alt="Image Caption" src="/plagins/featureCarousel/images/sample2.jpg"~gt~~lt~/a~gt~
      ~lt~div class="carousel-caption"~gt~
        ~lt~p~gt~
          Он поочередно демонстрирует один из нескольких заданных иллюстраций с комментариями или без них.
        ~lt~/p~gt~
      ~lt~/div~gt~
    ~lt~/div~gt~
    ~lt~div class="carousel-feature"~gt~
      ~lt~a href="#"~gt~~lt~img class="carousel-image" alt="Image Caption" src="/plagins/featureCarousel/images/sample3.jpg"~gt~~lt~/a~gt~
      ~lt~div class="carousel-caption"~gt~
        ~lt~p~gt~
          Можно настроить виджет, чтобы текущий слайд работал как ссылка.
        ~lt~/p~gt~
      ~lt~/div~gt~
    ~lt~/div~gt~
    ~lt~div class="carousel-feature"~gt~
      ~lt~a href="#"~gt~~lt~img class="carousel-image" alt="Image Caption" src="/plagins/featureCarousel/images/sample4.jpg"~gt~~lt~/a~gt~
    ~lt~/div~gt~
    ~lt~div class="carousel-feature"~gt~
      ~lt~a href="#"~gt~~lt~img class="carousel-image" alt="Image Caption" src="/plagins/featureCarousel/images/sample5.jpg"~gt~~lt~/a~gt~
    ~lt~/div~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $("#carousel").featureCarousel({
      trackerIndividual:false,
      trackerSummation:false,
      largeFeatureWidth:0.5,
      largeFeatureHeight:0.5,
      smallFeatureWidth:0.25,
      smallFeatureHeight:0.25
    });
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Описание

Свойства

Оформление

Плагин Feature Carousel позволяет организовывать виджет типа карусель, который отлично подойдходит для презентаций ключевых материалов на сайте. Плагин стабилен, является кроссбраузерным и гибко настраиваем. Однако, подготовку для его установки и настройку его внешнего вида нельзя назвать легкой и интуитивно понятной. Кое что нужно настраивать на стороне html, кое что в css, а остальное в настройках самого плагина. Однако описание всего этого можно найти в данном руководстве (см. вкладку "Оформление").

Замечание 1: плагин рассчитан на работу с изображениями одного размера.

Замечание 2: плагин позволяет отображать только одну карусель на одной странице.

Подключение и использование

Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery и два файла плагина: js и css (их можно скачать на github.com):

<link rel="stylesheet" href="feature-carousel.css" charset="utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.featureCarousel.min.js"></script>

Плагин необходимо применить к div-элементу с идентификатором carousel, со следующим содержимым:

<div id="carousel">
  <div class="carousel-feature">
    <a href="#"><img class="carousel-image" alt="Image Caption" src="sample1.jpg"></a>
    <div class="carousel-caption">
      <p>
        Подпись к первому слайду.
      </p>
    </div>
  </div>
  <div class="carousel-feature">
    <a href="#"><img class="carousel-image" alt="Image Caption" src="sample2.jpg"></a>
    <div class="carousel-caption">
      <p>
        Подпись ко второму слайду.
      </p>
    </div>
  </div>
 
  ... <!-- Следующие слайды -->
</div>
 
<!-- Далее идут элементы, которые станут стрелками для перелистывания -->
<div id="carousel-left"><img src="images/arrow-left.png" /></div>
<div id="carousel-right"><img src="images/arrow-right.png" /></div>

Превратить этот шаблон в карусель можно будет так:

$('#carousel').featureCarousel({
  // если это нобходимо, можно задать настройки 
  // в формате имя1:значение1, имя2:значение2
});

Описанный выше html-шаблон обязателен для правильной работы карусели, вплоть до имен классов и идентификаторов:

Идентификатор carousel для основного элемента с содержимым слайдов (картинками и комментариями)

Класс carousel-feature для элемента обертывающего каждый слайд в отдельности

Класс carousel-image для элемента img с изображением текущего слайда

Класс carousel-caption для элемента с текстом текущего слайда

div-элементы с идентификаторами carousel-right и carousel-left и изображениями стрелочек внутри. Если стрелки не нужны, эти элементы следует опустить.

Информация

Размер плагина ~11k (js+css)

Официальная страница: [1]

Кроссбраузерный (работает во всех современных браузерах)

↓ название :типы значений (значение по умолчанию)

largeFeatureWidth:float(0)

Задает масштаб ширины изображения в текущем слайде. Если свойство равно 0, изображение показывается в настоящую величину, если более 0, это значение становится множителем для исходной ширины изображения (от 0 до 1 картинка будет уже оригинала, более 1 — шире).

Аналогичное свойство высоты изображения в главном слайде: largeFeatureHeight. Аналогичные свойства для вспомогательных слайдов (по краям от основного): smallFeatureWidth и smallFeatureHeight.

// ------- Работа со свойством largeFeatureWidth---------
// в момент установки плагина на элемент
$('#carousel').featureCarousel({ largeFeatureWidth:0.5 });

largeFeatureHeight:float(0)

Задает масштаб высоты изображения в текущем слайде. Если свойство равно 0, изображение показывается в настоящую величину, если более 0, это значение становится множителем для исходной высоты изображения (от 0 до 1 картинка будет ниже оригинала, более 1 — выше).

Аналогичное свойство ширины изображения в главном слайде: largeFeatureWidth. Аналогичные свойства для вспомогательных слайдов (по краям от основного): smallFeatureWidth и smallFeatureHeight.

// ------- Работа со свойством largeFeatureHeight ---------
// в момент установки плагина на элемент
$('#carousel').featureCarousel({ largeFeatureHeight:0.5 });

smallFeatureWidth:float(0.5)

Задает масштаб ширины изображения во вспомогательных слайдах (по краям от основного). Если свойство равно 0, изображение показывается в настоящую величину, если более 0, это значение становится множителем для исходной ширины изображения (от 0 до 1 картинка будет уже оригинала, более 1 — шире).

Аналогичное свойство высоты изображения во вспомогательных слайдах: smallFeatureHeight. Аналогичные свойства для главного слайда: largeFeatureWidth и largeFeatureHeight.

// ------- Работа со свойством smallFeatureWidth---------
// в момент установки плагина на элемент
$('#carousel').featureCarousel({ smallFeatureWidth:0.25 });

smallFeatureHeight:float(0.5)

Задает масштаб высоты изображения во вспомогательных слайдах (по краям от основного). Если свойство равно 0, изображение показывается в настоящую величину, если более 0, это значение становится множителем для исходной высоты изображения (от 0 до 1 картинка будет ниже оригинала, более 1 — выше).

Аналогичное свойство ширины изображения во вспомогательных слайдах: smallFeatureWidth. Аналогичные свойства для главного слайда: largeFeatureWidth и largeFeatureHeight.

// ------- Работа со свойством smallFeatureHeight ---------
// в момент установки плагина на элемент
$('#carousel').featureCarousel({ smallFeatureHeight:0.25 });

topPadding:integer(20)

Определяет верхний отступ блока с изображениями карусели (в пикселях).

Управляющие элементы карусели (стрелочки и список слайдов) обладают абсолютным позиционированием и поэтому не сдвигаются вместе с изображениями.

Как видно из иллюстрации, кроме topPadding, есть еще два свойства, отвечающих за расположение элементов карусели: sidePadding и smallFeatureOffset.

// ------- Работа со свойством topPadding ---------
// в момент установки плагина на элемент
$('#carousel').featureCarousel({ topPadding:35 });

sidePadding:integer(50)

Определяет горизонтальные отступы изображений от границ карусели (в пикселях).

Как видно из иллюстрации, кроме sidePadding, есть еще два свойства, отвечающих за расположение элементов карусели: topPadding и smallFeatureOffset.

// ------- Работа со свойством sidePadding ---------
// в момент установки плагина на элемент
$('#carousel').featureCarousel({ sidePadding:60 });

smallFeatureOffset:integer(50)

Определяет верхний отступ изображений во вспомогательных слайдах (в пикселях).

Как видно из иллюстрации, кроме smallFeatureOffset, есть еще два свойства, отвечающих за расположение элементов карусели: topPadding и sidePadding.

// ------- Работа со свойством smallFeatureOffset ---------
// в момент установки плагина на элемент
$('#carousel').featureCarousel({ smallFeatureOffset:60 });

startingFeature:integer(1)

Свойство отвечает за то, какой слайд будет открыт первый. Нумерация слайдов начинается с 1.

// ------- Работа со свойством startingFeature ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ startingFeature: 3 });

carouselSpeed:integer(1000)

Определяет продолжительность анимации смены слайда (в миллисекундах).

// ------- Работа со свойством startingFeature ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ carouselSpeed: 700 });

autoPlay:integer(4000)

Устанавливает длительность (в миллисекундах) автоматического переключения между слайдами или отключает его (если свойство равно нулю).

// ------- Работа со свойством autoPlay ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ autoPlay: 0 });

pauseOnHover:boolean(true)

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

Свойство имеет смысл только если включено свойство autoPlay, отвечающее за автоматическое переключение между слайдами.

// ------- Работа со свойством pauseOnHover ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ pauseOnHover: false });

stopOnHover:boolean(false)

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

// ------- Работа со свойством stopOnHover ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ stopOnHover: true });

trackerIndividual:boolean(true)

Определяет, необходимо ли отображать навигацию по номерам слайдов.

// ------- Работа со свойством stopOnHover ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ stopOnHover: false });

trackerSummation:boolean(true)

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

// ------- Работа со свойством stopOnHover ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ trackerSummation: false });

preload:boolean(true)

Определяет, необходимо ли делать предзагрузку изображений для всех слайдов. При отключении этого свойства желательно задавать всем элементам с изображениями необходимые размеры (css-свойства width и height).

// ------- Работа со свойством preload ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ preload: false });

displayCutoff:integer(0)

Если значение этого свойства больше нуля, то оно определит сколько слайдов будут участвовать в карусели (начиная с первого).

// ------- Работа со свойством displayCutoff ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ displayCutoff: 7 });

animationEasing:string('swing')

Определяет динамику перемещения слайдов при их переключении.

// ------- Работа со свойством swing ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ swing: 'linear' });

leftButtonTag:string('#carousel-left')

Определяет селектор левой стрелки переключения (для перехода на предыдущий слайд).

// ------- Работа со свойством leftButtonTag ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ leftButtonTag: '#leftArrow' });

rightButtonTag:string('#carousel-right')

Определяет селектор правой стрелки переключения (для перехода на следующий слайд).

// ------- Работа со свойством rightButtonTag ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ rightButtonTag: '#leftArrow' });

captionBelow:boolean(false)

По умолчанию, текст слайда размещается внизу на иллюстрации. Если необходимо, чтобы вместо этого текст оказался ПОД изображением, необходимо установить это свойство в true.

// ------- Работа со свойством captionBelow ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ captionBelow: true });

movedToCenter:function($.noop)

Эта функция вызывается в момент, когда один из слайдов оказывается в центре. В качестве аргумента в функцию передается объект jQuery этого слайда.

// ------- Работа со свойством movedToCenter ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ movedToCenter: function($el){
  alert("Основной слайд изменен!");
}});

leavingCenter:function($.noop)

Эта функция вызывается в момент, когда один из слайдов покидает центр (перестает быть основным). В качестве аргумента в функцию передается объект jQuery этого слайда.

// ------- Работа со свойством leavingCenter ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ leavingCenter: function($el){
  alert("Основной слайд изменен!");
}});

clickedCenter:function($.noop)

Эта функция вызывается в момент, когда происходит нажатие по основному слайду. В качестве аргумента в функцию передается объект jQuery этого слайда.

// ------- Работа со свойством clickedCenter ---------
// в момент установки плагина на элемент
$("textarea").autoResize({ leavingCenter: function($el){
  alert("На слайде была нажата кнопка мыши!");
}});

Как уже было сказано в описании, рычаги для настройки оформления плагина (к сожалению) разбросаны между свойствами, css и html. Тем не менее "заточить" оформление под себя все же не сложно.

Размер всей карусели определяются в css и по умолчанию равен 960 на 280 пикселей. Изменить их можно, изменив css-правила элемента с идентификатором carousel (как это сделано в демонстрации этого плагина на данном сайте).

Размеры отображаемых слайдов можно изменить в свойствах плагина (первые четыре свойства во вкладке Свойства).

Отступы слайдов от краев карусели так же можно задать в свойствах плагина:

Оформление отдельно взятого слайда (рамка, стиль курсора и др.) определено в элементах с классом carousel-feature. В оформлении текста к слайду цвет фона задается в css у элементов с классом carousel-feature, а уровень прозрачности у них же, но уже динамически, в js (то есть изменить его будет куда более проблематично).

css-стили, определяющие расположение стрелок запускающих переключения слайдов находятся в css (идентификаторы carousel-left и carousel-right) и они спозиционированы абсолютно (так что их значения так же можно переписать в правилах css).

Элемент с перечнем страниц (элемент с классом tracker-individual-container), а так же номером и суммой страниц (элемент с классом tracker-summation-container), тоже спозиционированы абсолютно и могут быть изменены в css, как это сделано в демонстрационных примерах выше (см. их исходный код).

Карусель изображений Feature Carousel

Feature carousel

Подключение и использование

Информация

Функции по категориям

Навигация