5
Próbuję utworzyć niestandardową karuzelę obrazu pionowego , ponieważ nie mogę używać żadnych wtyczek z powodu zdarzeń js dołączonych do obrazów, które muszę zachować i jedyny sposób, dla mnie praca polega na stworzeniu niestandardowej karuzeli.Utwórz pionową karuzelę obrazów
Funkcjonalności
- karuzela Obraz ma 3 jednakowe rozmiary w rzutni.
- Karuzela obrazów ma przycisk następny/poprzedni, który umożliwia przeglądanie/wybór większej liczby obrazów.
- Następny/poprzedni przycisk umożliwia tylko jeden krok na raz, co oznacza, że nie wybierze następnego zestawu obrazów i nie wyświetli go w okienku ekranu.
- Karuzela oferuje wybrać dowolny obraz w rzutni i będzie synchronizować gdy obok przycisku/prev kliknięciu
Wszystkie funkcje wymienione powyżej jest już wdrożony.
PROBLEM
ostatni obraz nie będzie przystawki/stop przed kolejnym przycisku, jak stworzy spację pomiędzy.
kod JS
$(function(){
var image_height = 0;
var gallery_offset = 0;
var image_count = $('img.thumbnail').length;
var click_count = 0;
var image_height = 0;
var last_images_count = 0;
$('.gallery-container a').click(function(){
$('.gallery-container a').removeClass('active')
$(this).addClass('active');
});
jQuery('.thumbnail').each(function(){
$(this).on('load', function(){ image_height = $(this).parent().outerHeight(); });
image_height = $(this).parent().outerHeight();
})
// Disable arrows if the images count is 3 below
if(image_count <= 3) {
$('.product-more-pictures .up, .product-more-pictures .down').addClass('disabled')
click_count = 0;
}
// Set the first image as active
jQuery('.gallery-container img.thumbnail').first().click();
var thumb_active = jQuery('.gallery-container .active');
$('.gallery-container a').on('click', function() {
thumb_active = jQuery('.gallery-container .active');
});
$('.product-more-pictures .down').on('click', function (e) {
$('.product-more-pictures .up').removeClass('disabled')
if(thumb_active.nextAll(':lt(1)').length) {
thumb_active.nextAll(':lt(1)').children().click()
thumb_active = jQuery('.gallery-container .active');
}
if(! thumb_active.next().length) {
$(this).addClass('disabled')
} else {
$(this).removeClass('disabled');
}
if (click_count < image_count) {
click_count = click_count + 1;
update_gallery('down');
}
});
$('.product-more-pictures .up').on('click', function() {
$('.product-more-pictures .down').removeClass('disabled')
if(thumb_active.prevAll(':lt(1)').length) {
thumb_active.prevAll(':lt(1)').children().click()
thumb_active = jQuery('.gallery-container .active');
}
if(! thumb_active.prev().length) {
$(this).addClass('disabled')
} else {
$(this).removeClass('disabled');
}
if (click_count > 0) {
click_count = click_count - 1;
update_gallery('up');
}
});
function update_gallery(direction) {
gallery_offset = click_count * image_height;
last_images_count = thumb_active.nextAll().length;
$(".gallery-container").animate({
'top': '-' + gallery_offset + 'px'
}, 800);
}
});
Fiddle: https://jsfiddle.net/qrvrdjch/6/
Każda pomoc będzie bardzo mile widziane :)
Awesome! dzięki Manu! – Vincent