5
Ich versuche, ein benutzerdefinierte vertikale Bild Karussell zu erstellen, weil ich keine Plugins da draußen aufgrund der js Ereignisse an die Bilder, die ich beibehalten muss und die einzige Möglichkeit, die würde verwenden würde Arbeit für mich ist es, benutzerdefinierte Karussell zu erstellen.Erstellen Sie ein vertikales Bild Karussell
Funktionalitäten
- Bild Karussell hat gleich 3 Größen im Ansichtsfenster haben.
- Das Bildkarussell hat die nächste/vorherige Schaltfläche, mit der Sie weitere Bilder anzeigen/auswählen können.
- Die nächste/vorherige Schaltfläche lässt nur einen Schritt zu einem Zeitpunkt zu, dh, es wird nicht die nächste Gruppe von Bildern ausgewählt und im Ansichtsfenster angezeigt.
- Karussell bietet Ihnen alle Bilder im Ansichtsfenster auszuwählen, und dies wird synchronisieren, wenn die nächste/Prev Taste
Alle Funktionalitäten oben aufgeführten ist bereits implementiert.
PROBLEM
Das letzte Bild wird vor der nächsten Taste nicht Snap/Stopp, da es Leerzeichen dazwischen schaffen.
JS-Code
$(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/
Jede Hilfe wäre sehr geschätzt :)
Super! Danke Manu! – Vincent