How can I make Product Images (if product has multiple photos) Swipeable with a finger left/right using CSS or JS scripte in mobile version? How to make Product Images carousel slider use mobile left/right swipe?
I have Stencil Theme "Meros" in Bigcommerce my store. Example (product with multiple photos) https://figureskatingstore.com/jerrys-ice-skating-graceful-gathers-dress-solitaire-style-f22003/
CSS code ( overflow-x: scroll; ) doesn't work correctly in my code. What I want to do is to add left/right touch swipe functionality for mobile devices only.
Regards, Iana
CSS code ( overflow-x: scroll; ) doesn't work correctly in my code.
edit /templates/components/products/product-view.html
<div id="product-photos" class="productView-thumbnails owl-carousel" data-owl='{
"items": 4,
"nav": true,
"margin": 6,
"dots": false,
"slideBy": 4,
"responsive": {
"0": {
"items": 3,
"slideBy": 3
},
"480": {
"items": 4,
"slideBy": 4
},
"600": {
"items": 5,
"slideBy": 5
},
"768": {
"items": 4,
"slideBy": 4
},
"992": {
"items": 3,
"slideBy": 3
},
"1200": {
"items": 4,
"slideBy": 4
}
},
"responsiveRefreshRate": 0
}'>
{{#each product.images}}
<div class="productView-thumbnail">
<a
class="productView-thumbnail-link"
href="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-item
data-image-gallery-new-image-url="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-zoom-image-url="{{getImage this 'zoom_size' (cdn ../theme_settings.default_image_product)}}">
<img src="{{getImage this 'productview_thumb_size' (cdn ../theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
</a>
</div>
{{/each}}
