Home › Forums › Basel support forum › Dots instead of thumbnails on the product page image carousel
Dots instead of thumbnails on the product page image carousel
- This topic has 5 replies, 2 voices, and was last updated 7 years, 1 month ago by
Artem Temos.
-
AuthorPosts
-
January 16, 2018 at 8:53 pm #33732
floristbParticipantDear support, is there a possibility to show dots instead of thumbnails underneath the image carousel on the product pages for mobile devices?
January 17, 2018 at 7:25 am #33763
Artem TemosKeymasterHello,
Unfortunately, there is no such option in our theme for product images gallery.
Kind Regards
January 30, 2018 at 8:50 pm #36240
floristbParticipantIsn’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/
January 31, 2018 at 7:41 am #36317
Artem TemosKeymasterActually, there is no HTML code for dots for the main product gallery images.
You can achieve it changing the filejs/functions.js
while JS optimization is turned off in Theme Settings -> Performancechange 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
January 31, 2018 at 7:57 pm #36597
floristbParticipantThanks 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?
January 31, 2018 at 8:16 pm #36603
Artem TemosKeymasterTry to change it from
dots:!1
todots:1
in the minified version of the script. -
AuthorPosts
- You must be logged in to create new topics. Login / Register