jQuery를 사용하여 무한 슬라이더를 만들려고합니다. 활성 슬라이드는 화면의 2/3이고 다음 슬라이드는 1/3이됩니다. 따라서 다음 슬라이드의 미리보기를 이미 보았습니다.무한 슬라이더 이전 버튼 논리가 작동하지 않습니다.
빌드 한 슬라이더가 작동 중입니다. next
을 클릭하면 슬라이더가 왼쪽으로 움직입니다. 초기화에
트릭
나는 마지막 슬라이드 후 처음 두 개의 슬라이드를 복제. slideIndex
, 즉 현재 색인을 계속 확인하면 슬라이드 수에서 1을 뺀 것이므로 슬라이더가 0으로 재설정됩니다. 무한대의 슬라이더가 있습니다. 나는 또한 당신이 첫 번째 슬라이드에있어 이전에 클릭 할 때 효과를 적용 할 때
문제
문제는 온다. 기본적으로 동일하게 수행해야하지만 슬라이더를 0으로 재설정하지 말고 슬라이드의 끝으로 다시 설정하십시오.
var slider = $('.slider');
var slides = slider.find('.slides').children();
var slidesW = slides.width();
root.offset = -Math.abs((root.slideIndex * slides.eq(index).width()));
console.log(root.offset);
// Update active class
slides.removeClass('active');
// slides.eq(index).addClass('active');
// Add class active
TweenMax.to(slides.eq(index), 1, {
className: 'active',
onComplete: function() {
if (root.slideIndex >= (root.numOfSlides - 2)) {
slider.find('.slides').addClass('no-transition');
slides.removeClass('active');
slides.filter(':first').addClass('active');
root.offset = 0;
TweenMax.set(slider.find('.slides'), {
x: root.offset,
onComplete: function() {
root.slideIndex = 0;
$('#footer .paging #indicator').find('span').html('01');
return false;
}
});
}
}
});
// Remove no-transition class
slider.find('.slides').removeClass('no-transition');
// Change position of ul.slides
TweenMax.to(slider.find('.slides'), 0.4, {
x: root.offset
});
나는 if (root.slideIndex === (root.numOfSlides - 2)) {
의 if 문 slideIndex
가 root.numOfSlides - 2
같은 경우는 항상 제로로 리셋됩니다 가지고 있기 때문에. 따라서 이전 또는 다음을 클릭하면 아무런 문제가되지 않습니다. slideIndex
이 슬라이드 4의 예제에 있으면 0으로 재설정됩니다.
은 내가 codepen에서 슬라이더를 다시 : https://codepen.io/anon/pen/zEmozr
희망 누군가가 검색 및 지금 어떤 일 시도한 후,이 문제를 해결하는 방법을 모르는 나를 도울 수 있습니다. 뭔가 명확하지 않거나 무엇이든지 알려주는 경우 알려 주시기 바랍니다. 미리 감사드립니다.