2016-11-30 7 views
0

내부에 3 개의 요소가있는 jcarousel이 고유 ID (1,2,3)와 함께 있습니다. 로드시 jcarouselPagination 항목이 완벽하게 작동하고 올바른 대상 ("data-item = 1,2,3")을 얻었습니다.jcarouselPagination : 크기 변경시 'page'변수가 변경됩니다.

그러나 작거나 작은 미디어로 화면 크기를 조정하면 jcarousel 페이지 항목이 올바르게 대상 지정되지 않습니다. 그들은 2에서 시작합니다 ("data-item = 2,3,4").

여기 매김 항목이 만들어 내 JQuery와 일부입니다

if ($(".ce_jcarousel").length == 0) { 
    return; 
} 
$('.ce_jcarousel').jcarousel(); 
$('.cejcarousel-pagination') 
    .on('cejcarouselpagination:active', 'a', function() { 
     $(this).addClass('active'); 
    }) 
    .on('cejcarouselpagination:inactive', 'a', function() { 
     $(this).removeClass('active'); 
    }) 
    .jcarouselPagination({ 
     'item': function (page, carouselItems) { 
      return '<a data-item="'+ page +'" class="slider_ce_text ' + (page == 1 ? "active" : "") + '" href="#' + page + '"><div class="grey_dot"></div></a>'; 
     } 
    } 
); 

난 단지 페이지로드에서이 함수를 호출에 크기를 조정하지, 그래서 문제가 무슨 일이 일어나고 있는지 점점이 결코! 감사합니다.

답변

0

좋아, t 정말 내 회전 목마가 크기 조정 .. 에 페이지 매김 항목을 생성 유지하지만 내가 resize.jcarousel 기능 바인딩을 해제했다 보인다 왜 그래서 여기거나 운동 t 바랬다 - 이유를 알아 냈어 그래서 didn를 내 관심이 있다면 새로운 (그리고 일하는) 코드!

if ($(".ce_jcarousel").length == 0) { 
return; 
} 
jcarousel.jcarousel({ 
    wrap: 'circular' 
}); 
$(window).unbind('resize.jcarousel'); 
$('.cejcarousel-pagination') 
     .on('jcarouselpagination:active', 'a', function() { 
      $(this).addClass('active'); 
     }) 
     .on('jcarouselpagination:inactive', 'a', function() { 
      $(this).removeClass('active'); 
     }) 
     .jcarouselPagination({ 
      perPage: 1, 
      item: function (page) { 
       return '<a data-item="' + page + '" class="slider_ce_text" href="#' + page + '"><div class="grey_dot"></div></a>'; 
      }, 
     }); 

window.onload = $("[data-item = '1']").addClass("active"); 

절대적인 대답은 아닌지 확실하지 않지만 작동합니다.