1
나는 매우 오래된 jquery 라이브러리와 아주 오래된 jcarousel 라이브러리에 대한 참조를 발견하는 동안 회사 웹 사이트를 정리하는 지루한 작업을해야했습니다. 두 라이브러리를 모두 업데이트하고 jcarousel을 다시 코딩하여 업데이트 된 구문을 사용하는 등의 경우 나는 이전의 것과 같은 페이지 매김 목록의 첫 번째 요소를 더 이상 표시하지 않습니다. 이는 적절한 그림으로 시작하여 예상대로 작동하지만 아래 목록은 사진은 2에서 시작합니다 (1 2 3 4 5 대신 2 3 4 5를 표시하고 사진 2가 활성화되면 1을 표시하고 2는 표시하지 않음). 여기에 내 코드의 세그먼트jcarousel-pagination이 제 회전 목마 목록의 첫 번째 숫자를 표시하지 않습니다.
index.html을
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li><a href="${base_url}/company.html"><img src="${base_url}/images/carousel/1CompSciHomeCarousel-company.png" alt="company" /></a></li>
<li><a href="${base_url}/auditpro.html"><img src="${base_url}/images/carousel/2CompSciHomeCarousel-audit.png" alt="audit|pro" /></a></li>
<li><a href="${base_url}/ic.html"><img src="${base_url}/images/carousel/3CompSciHomeCarousel-iC.png" alt="iC" /></a></li>
<li><a href="${base_url}/services.html"><img src="${base_url}/images/carousel/4CompSciHomeCarousel-services.png" alt="services" /></a></li>
<li><a href="${base_url}/i16.html"><img src="${base_url}/images/carousel/5CompSciHomeCarousel-i16.png" alt="i16" /></a></li>
</ul>
<p class="jcarousel-pagination">
</p>
</div>
</div>
function.js 언제나
(function($) {
$(function() {
$('.jcarousel')
.jcarousel({
wrap: 'circular'
})
.jcarouselAutoscroll({
interval: 4000,
target: '+=1',
autostart: true,
});
$('.jcarousel-control-prev')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('.jcarousel-control-next')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
})
.on('click', function(e) {
e.preventDefault();
})
.jcarouselPagination({
'item': function(page) {
return '<a href="#">' + page + '</a>';
}
});
});
})(jQuery);
입니다, 도움을 크게 감상 할 수있다. 미리 감사드립니다.