jCarousel - достижение активного состояния и перенос: круговой - PullRequest
Новая
       11

jCarousel - достижение активного состояния и перенос: круговой

0 голосов
/ 08 февраля 2011

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

Что произойдет, если карусель циклически перебирает все свои (5) изображений при возврате к первому, активное состояние было бы потеряно, потому что, согласно jcarousel, это был фактически 6-й (индекс просто продолжает увеличиваться).

Я просто пошел дальше и вместо этого использовал wrap: 'both', который по крайней мере имелправильно функционирующее активное состояние.Однако теперь клиент говорит, что ему не нравится этот эффект, и он просто хочет, чтобы анимация вернулась в положение 1 после окончательного изображения.Это означает, что мне нужно, чтобы 'обертка' как-то работала.

Ниже приведен мой текущий код.Может кто-нибудь решить эту проблему, так как это немного выше моей головы! 

function highlight(carousel, obejctli,liindex,listate){
     jQuery('.jcarousel-control a:nth-child('+ liindex +')').attr("class","active");
};

function removehighlight(carousel, obejctli,liindex,listate){
     jQuery('.jcarousel-control a:nth-child('+ liindex +')').removeAttr("class","active");
};



    jQuery('#mycarousel').jcarousel({
        initCallback: mycarousel_initCallback,
        auto: 5,
        wrap: 'both',
        vertical: true,
        scroll: 1,
        buttonNextHTML: null,
        buttonPrevHTML: null,
        animation: 1000,
        itemVisibleInCallback:  highlight,
        itemVisibleOutCallback: removehighlight

    });
});

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

1 Ответ

0 голосов
/ 09 февраля 2011

Я бы поместил некоторые метаданные в атрибут элемента в li, например: 

<ul class="carousel">
  <li><img src="whatever.png" rel="1" /></li>
  <li><img src="whatever.png" rel="2" /></li>
  <li><img src="whatever.png" rel="3" /></li>
</ul>

и затем сделал бы 

function highlight(carousel, obejctli,liindex,listate){
    var nthchild = $("img", obejctli).attr('rel'); //not sure if this is the syntax
    jQuery('.jcarousel-control a:nth-child('+ nthchild +')').attr("class","active");
};

Если я правильно помню, objectliобъект jquery, это элемент dom.Возможно, вам придется скорректировать код, так как я не могу вспомнить, как использовать селекторы в не-jquery объектах.

...