Product Thumbnail Customization / Owl Slider

We’ve been attempting to customize the Owl slider for the thumbnails on product pages. Our goal is to show 6 centered product thumbnails, instead of 4 (primarily for desktops). The mobile functionality can stay the same.

We’ve tried directly editing the Owl.Defaults in /js/owl.carousel.js, but the changes aren’t applying. Are there other js files we should be customizing? Please let us know if you have a suggestion for a function that would allow this customization.

Hello,

You can customize its parameters in the file js/functions.js, function name – initThumbnailsHorizontal. But you will have to disable JS minification option in Theme Settings -> Performance.

Kind Regards

Thank you, that worked. Does this file also have a setting to make the thumbnails centered?

Try to use this option https://owlcarousel2.github.io/OwlCarousel2/demos/center.html

Thanks for the assistance.

 function initThumbnailsHorizontal() {
                    $thumbs.addClass('owl-carousel').owlCarousel({
                        rtl: $('body').hasClass('rtl'),
                        items: basel_settings.product_gallery.thumbs_slider.items.desktop,
                        responsive: {
                            979: {
                                center: true,//emo edit
								items: 7 //emo edit
                            },

You are welcome. Do you have any extra questions regarding this topic?

[Author]

Posts