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

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

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

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

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

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

    });
});

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


jquery jquery-plugins jcarousel
person swisstony    schedule 07.02.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я бы поместил некоторые метаданные в атрибут элемента внутри 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.

person methodofaction    schedule 09.02.2011
comment
Спасибо Дуопикселю. Я передал это коллеге, и она дала почти такой же ответ, как и ваш! Ваше здоровье. - person swisstony; 13.02.2011