JQuery JCarousel Автоматическая прокрутка с другим событием

Я использую jQuery jCarousel (http://sorgalla.com/projects/jcarousel/examples/static_auto.html) с функцией автоматической прокрутки. Я хочу включить дополнительные функции для отображения текущего элемента отображения. Например, если у меня есть 6 элементов, когда он перемещается справа налево, у меня есть другой div, который должен отображать текущий элемент отображения, например «Отображение 1 из 6», «Отображение 2 из 6» и т. д.

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

Пожалуйста, помогите мне в этом отношении.

Заранее спасибо.

С уважением,

Венкатеш К.


uiscrollview jquery jcarousel
person user2579223    schedule 13.07.2013    source источник
comment
Примените ту же логику, которую вы используете для обновления числа со ссылкой на вашу функцию таймера.   -  person Rob Adams    schedule 13.07.2013
comment
Я новичок в jQuery. Я увеличиваю/уменьшаю счет, используя событие клика. Это встроенное событие jCarousel. Где, как событие автоматической прокрутки, я не уверен, как его вызывают. Также мне нужно знать, как включить другое событие, когда происходит автоматическая прокрутка. Дайте мне знать, если для этого требуется дополнительная информация. Пожалуйста, помогите мне в этом отношении, предоставив пример кода.   -  person user2579223    schedule 13.07.2013
comment
@ user2579223, пожалуйста, проверьте мой ответ ниже...   -  person Jean-Paul    schedule 14.07.2013

Ответы (1)


arrow_upward
0
arrow_downward

Что вам нужно сделать, так это запустить функцию, если autoscroll прокручивается до следующих изображений, а затем получить позицию индекса изображения в первой позиции.

jCarousel может вызвать функцию запуска для autoscroll с именем itemVisibleInCallback.

(Вы можете узнать о таких вещах, прочитав документацию jCarousel)

Добавление этого к инициализации jCarousel будет выглядеть примерно так:

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 2,
        wrap: 'last',
        itemVisibleInCallback: changeNumber
    });
});

Затем мы можем получить первый видимый элемент в carousel, используя вызов элемента carousel.first.

Следовательно:

function changeNumber(carousel){
    $("#update").html("The first image in the row is: "+carousel.first);
};

Рабочий пример можно найти ЗДЕСЬ.

Если вы хотите добавить текст к каждому изображению, вы можете переключить этот оператор и вывести что-то другое. Например:

switch (carousel.first)
{
    case 1: $("#update").html("Hello, how are you?");             break;
    case 4: $("#update").html("I have just been autoscrolled");   break;
    case 7: $("#update").html("Javascript is pretty awesome");    break;
    case 8: $("#update").html("Where's my coffee?");              break;
}

Вы можете найти реализацию этого ЗДЕСЬ.

Я надеюсь, что это отвечает на ваш вопрос. Удачи!

person Jean-Paul    schedule 13.07.2013
comment
Большое спасибо, Жан-Поль. Я реализовал аналогичную функциональность с помощью приведенного ниже кода: itemVisibleInCallback: { onBeforeAnimation: {}, onAfterAnimation: showCount}. - person user2579223; 14.07.2013