Установка и настройка JCarousel | JQuery слайдер - карусель


Для установки и корректной работы слайдера JCarousel (слайдер на JQuery) необходимо выполнить следующие шаги:

1.  Подключите необходимые файлы:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.jcarousel.js"></script>

Примечание: Минимальная требуемая JQuery версия 1.7.

2. Написать правильную HTML разметку (основная HTML структура):

<div class="jcarousel">
    <ul>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

Примечание: для более лучшего понимания разметки, покажу в виде схемы:

<div class="jcarousel"> <--------------------------------| Root element
    <ul> <-------------------------------| List element  |
        <li>...</li> <---| Item element  |               |
        <li>...</li> <---| Item element  |               |
    </ul> <------------------------------|               |
</div> <-------------------------------------------------|

Примечание: но это только пример. Так-же подойдет и следующая структура:

<div class="mycarousel"> <-------------------------------| Root element
    <div> <------------------------------| List element  |
        <p>...</p> <-----| Item element  |               |
        <p>...</p> <-----| Item element  |               |
    </div> <-----------------------------|               |
</div> <-------------------------------------------------|

Единственным требованием является то, что-бы разметка состояла из корневого элемента, элемента списка и самих элементов.

3.  Инициализация плагина JCarousel:

Для запуска плагина необходимо вызвать метод .jcarousel() для корневого элемента:

$(function() {
    $('.jcarousel').jcarousel({
        // Configuration goes here
    });
});

4.  Стили JCarousel:

Это минимальные необходимые настройки CSS для горизонтальной карусели:

/*
 Это видимая область карусели.
 Установите здесь ширину, чтобы определить, сколько пунктов будет видно.
 Ширина может быть либо фиксированной в пикселях или гибкой в процентах.
 Позиция должна быть relative!
*/
.jcarousel {
    position: relative;
    overflow: hidden;
}

/*
 Это контейнер для пунктов карусели.
 Вы должны убедиться, что позиция является относительная или абсолютная и
 что ширина достаточно велика, чтобы в неё влезли все элементы.
*/
.jcarousel ul {
    width: 20000em;
    position: relative;

    /* Опционально, так как это <ul> элемент */ 

    list-style: none;
    margin: 0;
    padding: 0;
}
 /*
 Это элементы пунктов.  jCarousel работает лучше, если элементы
 имеют фиксированную ширину и высоту (но это не обязательно).
 */
.jcarousel li {
    /* Требуется только для блочных элементов, таких как <li>  */
    float: left;
}

Вот так просто подключается и настраивается слайдер на JQuery - JCarousel.

 


Тэги:

Комментарии: 3

Прокомментировать »

 
 
Семен
13.08.2014
 

Привет, помогите пожалуйста с подключением карусели.

LAVRIK
14.08.2014
 

Добрый день. Если у вас проблемы с подключением, то в первую очередь загляните в консоль (opera, yandex-brauser или chrome - ctrl+shift+j). Ошибки скопируйте и пришлите мне на ящик - valery-lavrik@yandex.ru

IriJukLen
7.08.2017
 

Этот вопрос

 

Прокомментировать

 
 
Сообщение *
 
Проверочный код *
 
 
 
Яндекс.Метрика