Dots instead of thumbnails on the product page image carousel

Dear support, is there a possibility to show dots instead of thumbnails underneath the image carousel on the product pages for mobile devices?

Hello,

Unfortunately, there is no such option in our theme for product images gallery.

Kind Regards

Isn’t there a workaround to achieve this? The HTML is there for dots and also dots are used for the related products sections?

For example: https://www.charaqter.com/shop/executive-overcoat-in-agarwood-brown/

Actually, there is no HTML code for dots for the main product gallery images.
You can achieve it changing the file js/functions.js while JS optimization is turned off in Theme Settings -> Performance

change this part

mainCarouselArg : {
                rtl: $('body').hasClass('rtl'),
                items: 1,
                autoplay: ( basel_settings.product_slider_autoplay ),
                autoplayTimeout:3000,
                loop: ( basel_settings.product_slider_autoplay ),
                dots: false,
                nav: false,
                autoHeight: ( basel_settings.product_slider_auto_height == 'yes' ),
                navText:false,
                onRefreshed: function() {
                    $(window).resize();
                }
            }

to this

mainCarouselArg : {
                rtl: $('body').hasClass('rtl'),
                items: 1,
                autoplay: ( basel_settings.product_slider_autoplay ),
                autoplayTimeout:3000,
                loop: ( basel_settings.product_slider_autoplay ),
                dots: true,
                nav: false,
                autoHeight: ( basel_settings.product_slider_auto_height == 'yes' ),
                navText:false,
                onRefreshed: function() {
                    $(window).resize();
                }
            }

Regards

Thanks for the code!

It indeed works when we turn optimization for JS off, this however decreases loading times. I tried to do the same within /js/functions.min.js by changing the dots:!1 to dots:!0. This however doesn’t seem to work and I don’t get why this isn’t working?

Is there a way to achieve this with performance for JS turned on?

Try to change it from dots:!1 to dots:1 in the minified version of the script.

[Author]

Posts