CODA-SLIDER - СЛАЙДЕР ВКЛАДОК

+ -
0
CODA-SLIDER - СЛАЙДЕР ВКЛАДОК


Замечательный плагин слайдера вкладок на jQuery. Обладает множеством настроек.

Подключаем в шапке два файла стилей:
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/coda-slider-2.0.css" type="text/css" media="screen" />
Три файла со скриптами:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>    
<script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascripts/jquery.coda-slider-2.0.js"></script>


Разметка HTML
Основной принцип построения разметки, более конкретно смотрите в Демо:
<div class="coda-slider-wrapper">
        <div class="coda-slider preload" id="coda-slider-1">

            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">Панель 1</h2>
                    
                    <p>Контент</p>
                </div>
            </div>

            <div class="panel">
                <div class="panel-wrapper">
                    <h2 class="title">Панель 2</h2>
                    <p>Контент</p>
                </div>
            </div>
            
            <div class="panel">
                <div class="panel-wrapper">

                    <h2 class="title">Панель 3</h2>
                    <p>Контент</p>
                </div>
            </div>
        </div>
</div>


javascript
Вызывается плагин следующим образом:
$().ready(function() {
       $('#coda-slider').codaSlider();
   });


Опции
А вот куча настроек, позволяющий придать слайдеру ту функциональность, которая вам нужна:

- autoHeight
- Значения:
true, false, 1, 0
- По умолчанию: true
- Описание: Динамически изменяет высоту слайдера в зависимости от объёма контента в каждой панели.
- Примечание: Если установлено значение false или 0, высота слайдера будет установлена по высоте самой объёмной по содержанию панели.

- autoHeightEaseDuration
- Значения:
Любое значение в миллисекундах.
- По умолчанию: 1000
- Описание: Продолжительность эффекта смягчения для autoHeight.
- Примечание: В идеале это значение должно иметь то же значение, что и slideEaseDuration (см. ниже). Зависит от autoHeight, для которого установлены значения true или 1.

- autoHeightEaseFunction
- Значения:
смотрим тут.
- По умолчанию: "easeInOutExpo"
- Описание: Эффект метода смягчения используемый для autoHeight.
- Примечание: Значение должно быть заключено в кавычки. Зависит autoHeight для которого установлены значения true или 1.

- autoSlide
- Значения:
true, false, 1, 0
- По умолчанию: false
- Описание: Должен ли слайдер автоматически пролистывать панели.

- autoSlideInterval
- Значения:
Любое значение в миллисекундах.
- По умолчанию: 7000
- Описание: Время ожидания между сменой слайдов.
- Примечание: Зависит от autoSlide для которого установлены значения true или 1.

- autoSlideStopWhenClicked
- Значения:
true, false, 1, 0
- По умолчанию: true
- Описание: Должна ли функция autoSlide останавливать слайдшоу, когда пользователь взаимодействует со слайдером.
- Примечание: Зависит от autoSlide, для которого должны быть установлены значения true или 1.

- crossLinking
- Значения:
true, false, 1, 0
- По умолчанию: true
- Описание: Разрешает вечные ссылки для каждой панели слайдера через URL хэш (например, http://www.pcvector.net/#4).
- Примечание: Лучше всего, если autoSlide (см. выше) будет отключен. Только цифры могут использоваться для значения хэша; они автоматически генерируются скриптом. Если кросс-ссылки включены и присутствует валидный URL хэш, и настройки для firstPanelToLoad (см. ниже) будут отменены.

- dynamicArrows
- Значения:
true, false, 1, 0
- По умолчанию: true
- Описание: Размещение кнопок Влево и Вправо рядом со слайдером.
- Примечание: Установка значения на false или 0 позволяет жестко закрепить кнопки Влево и Вправо с помощью HTML, что добавляет большей гибкости в их расположении на странице. Смотрите демо 4.

- dynamicArrowLeftText
- Значения:
Любое значение.
- По умолчанию: "« влево"
- Описание: Кнопка для листания слайда влево.
- Примечание: Зависит от dynamicArrows , для которого должны быть установлены значения true или 1.

- dynamicArrowRightText
- Значения:
Любое значение.
- По умолчанию: "вправо »"
- Описание: Кнопка для листания слайда вправо.
- Примечание: Зависит от dynamicArrows , для которого должны быть установлены значения true или 1.

- dynamicTabs
- Значения:
true, false, 1, 0
- По умолчанию: true
- Описание: Добавляет навигацию ввиде вкладок для слайдера.
- Примечание: panelTitleSelector (см. ниже) позволяет указать, что текст-якорь используется в каждой вкладке.

- dynamicTabsAlign
- Значения:
"center", "left", "right"
- По умолчанию: "center"
- Описание: Определяет горизонтальное выравнивание навигации вкладок относительно слайдера.
- Примечание: Зависит от dynamicTabs, для которого должны быть установлены значения true или 1. Значение должно быть заключено в кавычки.

- dynamicTabsPosition
- Значения:
"bottom", "top"
- По умолчанию: "top"
- Описание: Определяет положение навигации с вкладками выше или ниже слайдера.
- Примечание: Зависит от dynamicTabs, для которого должны быть установлены значения true или 1. Значение должно быть заключено в кавычки.

externalTriggerSelector
- Значения:
Практически любой jQuery селектор, но лучше указывать ссылку на анкор.
- По умолчанию: "a.xtrig"
- Описание: УКазывает селектор для элементов на странице, помимо обычных элементов навигации, вызывающих слайд.
- Примечание: Значение должно быть заключено в кавычки. Внешний вызывающий элемент (триггер) должен иметь rel атрибут с указанием id слайда на который он должен влиять. Если требуется кросс-линкинг, не забудьте включить href атрибут, с указанием соответсвующего хэша URL. Смотрите демо 3.

- firstPanelToLoad
- Значения:
Любое целое число, соответсвующее панели (например, 2 если хотим загрузить первой вторую панель).
- По умолчанию: 1
- Описание: Указывает какая панель будет загружена первой в отсутсвии cross-linking.
- Примечание: Смотрите демо 5.

- panelTitleSelector
- Значения:
Практически любой jQuery селектор.
- По умолчанию: "h2.title"
- Описание: Определяет какой элемент в каждой панели навигации вкладок будет продублирован.
- Примечание: Зависит от dynamicTabs , для которого должны быть установлены значения true или 1. Значение должно быть заключено в кавычки.

- slideEaseDuration
- Значения:
Любое значение в миллисекундах.
- По умолчанию: 1000
- Описание: Продолжительность эффекта смягчения.
- Примечание: В идеале, это значение должно быть таким же, как и у autoHeightEaseDuration (см. выше). Зависит от autoHeight , для которого должны быть установлены значения true или 1.

- slideEaseFunction
- Значения:
смотрим тут.
- По умолчанию: "easeInOutExpo"
- Описание: Смягчающий метод используемый для слайд эффекта.
- Примечание: Значение должно быть заключено в кавычки.

Скачать исходник:
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментариев 0