gvs-jCarouselLite

Плагин представляет собой WordPress надстройку над известным js плагином jCarouselLite. Позволяет использовать все возможности плагина jCarouselLite через вызов шорткода gvjcl в нужном месте контента. Большая часть параметров шорткода имеет схожие с js плагином имена, но вместо верблюжьей нотации используется подчеркивание. По умолчанию разделителем между элементами содержимого является «/!».

Языки настроек: Английский, русский.

Страница плагина на WordPress.org

Использование:

[gvjсl опция1="значение1" ...опцияN="значениеN"]
Элемент1/!
Элемент2/!
....
ЭлементN
[/gvjсl]

Конфигурация по умолчанию


Это конфигурация по умолчанию. Карусель создается с помощью кнопок навигации «next» и «prev». Вам не нужно ничего указывать, если вы не хотите настроек.

btn_next=".default .next" btn_prev=".default .prev"

Авто-прокрутка


Автоматически прокручивает содержимое на основе периода времени, указанного в опции auto.

auto="800" speed="1000"

Прокрутить больше одного элемента


С помощью опции scroll можно прокручивать несколько элементов. Укажите количество элементов для прокрутки, и элементы начнут прокрутку по указанному номеру при нажатии кнопки Далее или назад.

scroll="2" btn_next=".scrollMore .next" btn_prev=".scrollMore .prev"

Навигация колесом мыши


Вы можете использовать колесо мыши для прокрутки от одного элемента к другому. Попробуйте прокрутить колесо мыши при наведении курсора на карусель и посмотреть, что произойдет. Это не является взаимоисключающим с кнопками навигации. Таким образом, вы можете использовать как кнопки навигации, так и колесо мыши в одной карусели, если хотите. Примечание: Чтобы это работало, нужен плагин колеса мыши. В данном плагине WordPress он уже подключен.

mouse_wheel="true"

Колесо мыши и кнопки навигации вместе


Эта демонстрация показывает, что вы можете использовать как колесо мыши, так и кнопки навигации для одной и той же карусели. Попробуйте прокрутить колесо мыши или нажатием на кнопки далее и назад Примечание: Чтобы это работало, нужен плагин Mouse Wheel.

mouse_wheel="true" btn_next=".mouseWheelButtons .next" btn_prev=".mouseWheelButtons .prev"

Пользовательская Анимация. Easing Эффекты.


Easing эффект — лучшее, что случилось с jQuery, после самого jQuery. Если вы предпочитаете, чтобы карусель анимировалась с использованием эффекта, все, что вам нужно сделать, это поставить его. Например, этот использует «bounceout». Примечание: Для этого Вам нужен easing plugin

easing="easeOutBounce" btn_next=".bounceout .next" btn_prev=".bounceout .prev" speed="1000"

Пользовательская Анимация. Управление скоростью.


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

speed="800" btn_next=".slower .next" btn_prev=".slower .prev"

Пользовательский Виджет.


Довольно аккуратный виджет. Не так ли? Просто нажмите на миниатюру изображения и вы увидите как волшебным образом изменится изображение сверху. Кроме того, я использовал эту возможность, чтобы использовать другой эффект смягчения — «откат»

speed="800" easing="easeOutBack" btn_next=".widget1 .next" btn_prev=".widget1 .prev"

jQuery('body').on('click','.widget1 img',function(){
  jQuery(".widget1 .mid img").attr("src", jQuery(this).attr("src"));
});

Больше или меньше


Что касается jCarouselLite, вы-босс. Поскольку он находится непосредственно под вашим контролем, вы можете увеличить или уменьшить количество видимых элементов.

visible="2" btn_next=".moreItems .next" btn_prev=".moreItems .prev"

Любой контент — не только изображения


Вы не ограничены только изображениями. Подойдет любой контент. Я думаю, вы ограничены только своим воображением.

btn_next=".nonImageContent .next" btn_prev=".nonImageContent .prev"

Смешанный контент — не только изображения


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

btn_next=".mixedContent .next" btn_prev: ".mixedContent .prev"

Вертикальность


Теперь вы можете даже наклонить его вертикально или горизонтально. Может ли он стать лучше?

vertical="true" btn_next=".vertical .next" btn_prev=".vertical .prev"

Внешнее управление


Кнопки управления. Почувствуйте гибкость…

1 2 3 4 5 6 7 8 9 10 11 12


visible="3" start="0" btn_next=".externalControl .next" btn_prev=".externalControl .prev" 
btn_go="'.externalControl .1','.externalControl .2','.externalControl .3','.externalControl .4',
'.externalControl .5', '.externalControl .6','.externalControl .7','.externalControl .8',
'.externalControl .9','.externalControl .10','.externalControl .11', '.externalControl .12'"

Обратные вызовы


Не вызывайте нас, мы вызовем вас. Сделаем обратный вызов один раз до начала анимации и один раз после ее окончания. Функции обратного вызова пишутся на языке JavaScript. Через параметр функции каждый раз передается объект jquery, который выбирает все видимые элементы в карусели.


btn_next=".callback .next" btn_prev=".callback .prev"
before_start="function(a){
  alert('Before animation starts:' + a);
}"
after_end="function(a){
  alert('After animation ends:' + a);
}"

Слайдер


Слайдер изображений для вашего блога. Здесь ничего не изменилось, кроме размера изображения и количества видимых элементов.

visible="1" speed="500" btn_next=".imageSlider .next" btn_prev=".imageSlider .prev"

Слайдер изображения с внешними элементами управления.


Рассмотрим пример, в котором в качестве элементов управления используются кнопки с номерами слайдов

1 2 3 4 5 6 7 8 9 10 11 12


visible="1" btn_next=".imageSliderExt .next" btn_prev=".imageSliderExt .prev"  
btn_go="'.imageSliderExt .1','.imageSliderExt .2','.imageSliderExt .3','.imageSliderExt .4',
'.imageSliderExt .5', '.imageSliderExt .6','.imageSliderExt .7','.imageSliderExt .8',
'.imageSliderExt .9','.imageSliderExt .10','.imageSliderExt .11', '.imageSliderExt .12'"

Неполная видимость элементов


Вы можете экспериментировать с вещественными числами, когда дело доходит до количества видимых элементов. Используя это, вы можете дать подсказку пользователю, что карусель имеет больше элементов, показывая половину последнего элемента, сохраняя остальные невидимыми. Взглянуть…

visible="2.5" circular="false" btn_next=".fraction .next" btn_prev=".fractions .prev"

Карусель не по кругу


Карусели jCarouselLite по умолчанию круговые. Вы должны явно отключить циклическое поведение, если вам это не нужно.

circular="false" btn_next=".nonCircular .next" btn_prev=".nonCircular .prev"

скачать gvs-jcarousellite