jquery cycle and jcarousel

Question

jquery cycle과 jcarousel을 사용하여 갤러리 설정을했습니다. 나는

<ul id="pager"> 
    <?php foreach ($thumbs as $thumb) : ?> 
<li><a href="#"><?php echo $thumb ?> </a></li> 
    <?php endforeach; ?> 
</ul> 

가 지금은 회전 목마를 만들어 내 호출기 볼 수의 7 개 요소를 가지고

$('#pager').jcarousel({}); 
if ($('#images').length > 0) { 
    $('#images').before('<ul id="nav">').cycle({ 
    fx:  'turnDown', 
    speed: 500, 
    timeout: 5000, 
    pagerEvent: 'mouseover', 
    pager: '#pager', 
    pagerAnchorBuilder: function(idx, slide) { 
     return '#pager li:eq(' + idx + ') a'; 
    } , 
    after: function(dir, id, el) { 
     var w= $('.jcarousel-clip-horizontal').width(); 
     var i = $('.jcarousel-item-horizontal').width(); 
     var slide = $('#pager .activeSlide'); 
     if (slide.position.left > w-i ) { 
      $('div.jcarousel-next').trigger('click'); 
     } 
    } 
}); 
    $('#pager a').mouseenter(function() { 
    $('#images').cycle('toggle'); 
}).mouseleave(function(){ 
    $('#images').cycle('toggle'); 
}); 

주기에 호출기를 추가

PHP로 썸네일을 생성하고 난 다음의 스크롤 이벤트를 트리거 할 보이지 않는 항목.

jquery index() 함수를 사용하여 activeSlider에 카운터를 추가하려고했지만 커서로 호출기 항목 위에 마우스를 올려 놓으면 지저분 해졌습니다.

어떤 조언이 필요합니다.

Answer 1

나는 그래서 아마 더 잘하지만, 여기에 코드의 수, 문제를 whis에 대한 해결책을 찾을 나에게 동안을했다 당신이

http://jquery.malsup.com/cycle2/demo/caro-pager.php

http://jquery.malsup.com/cycle2/demo/carousel.php

Answer 2

좋아주기의 버전 2를 사용할 수 있다고 생각 나는 꽤 똑바로 앞으로이 같은 문제를 가진 사람에게 유용 할 것이다

$('#pager').jcarousel({ 
    scroll: 1, 
    wrap:'last', 
}); 
if ($('#images').length > 0) { 
    $('#images').before('<ul id="nav">').cycle({ 
     fx:  'turnDown', 
     speed: 500, 
     timeout: 5000, 
     pagerEvent: 'mouseover', 
     pager: '#pager', 
     pagerAnchorBuilder: function(idx, slide) { 
      return '#pager li:eq(' + idx + ') a'; 
     } 
     ,after: onBefore 
    }); 
}; 

function onBefore(curr,next,opts) { 
    var size = $('#pager li').size(); 
    var activeSlide = $('#pager .activeSlide'); 
    var position = activeSlide.offset(); 

    // get the position of the carousel clip container 
    var container = $('.jcarousel-clip'); 
    var containerOff = container.offset(); 

    //first load 
    if(position!=null){ 
        // get the information 
     var slideRigt = position.left + activeSlide.width(); 
     var containerRight = containerOff.left + container.width(); 
        // slide is out ou bound on the right 
      if (slideRigt > containerRight) { 
        $('div.jcarousel-next').trigger('click'); 
       } 
        // slide is out of bound on the left - rewind/wrap thumbnails to first item 
        else if (position.left < containerOff.left) { 
        $('div.jcarousel-next').trigger('click'); 
       }; 
    } 
}; 

희망이라고 생각 사용할 수 있습니다. 그래도 jcarousel에 대한 '원형'옵션을 사용하여이 작업을 수행 할 수 있는지 알아 내려고합니다.