feat: add slider on gallery images

Author: girishpanchal30

assets/js/src/shop/app.js

@@ -20,6 +20,53 @@ function initShop() {
 	) {
 		handleExclusiveSlider();
 	}
+
+	if (
+		document.body.classList.contains('single-product') &&
+		!document.body.classList.contains('sp-slider-gallery')
+	) {
+		handleGallerySlider();
+	}
+}
+
+const svgs = {
+	vertical: {
+		prev: '<svg width="30px" height="25px" viewBox="0 0 50 80" xml:space="preserve" style="transform: rotate(90deg)"><polyline fill="none" stroke="currentColor" stroke-width="7" points="25,76 10,38 25,0"/></svg>',
+		next: '<svg width="30px" height="25px" viewBox="0 0 50 80" xml:space="preserve" style="transform: rotate(90deg)"><polyline fill="none" stroke="currentColor" stroke-width="7" points="25,0 40,38 25,75"/></svg>',
+	},
+	horizontal: {
+		prev: '<svg width="25px" height="30px" viewBox="0 0 50 80" xml:space="preserve"><polyline fill="none" stroke="currentColor" stroke-width="7" points="25,76 10,38 25,0"/></svg>',
+		next: '<svg width="25px" height="30px" viewBox="0 0 50 80" xml:space="preserve"><polyline fill="none" stroke="currentColor" stroke-width="7" points="25,0 40,38 25,75"/></svg>',
+	},
+};
+
+/**
+ * Add prev and next
+ *
+ * @param {Node} targetNode
+ * @param {Node} slider
+ * @param {string} vertical
+ */
+function addNextPrev(targetNode, slider, vertical = false) {
+	const next = document.createElement('span');
+	const prev = document.createElement('span');
+
+	next.classList.add('neve-slider-control', 'next');
+	prev.classList.add('neve-slider-control', 'prev');
+
+	prev.innerHTML = vertical ? svgs.vertical.prev : svgs.horizontal.prev;
+	next.innerHTML = vertical ? svgs.vertical.next : svgs.horizontal.next;
+
+	prev.addEventListener('click', function () {
+		slider.goTo('prev');
+	});
+
+	next.addEventListener('click', function () {
+		slider.goTo('next');
+	});
+
+	targetNode.parentNode.insertBefore(prev, targetNode);
+	targetNode.parentNode.appendChild(next);
 }
 
 /**
@@ -89,6 +136,36 @@ function handleExclusiveSlider() {
 	}
 }
 
+/**
+ * Handle Gallery Image Slider
+ */
+function handleGallerySlider() {
+	const galleryNav = document.querySelector('ol.flex-control-nav');
+
+	if (!galleryNav) return;
+
+	const isDesktop = window.innerWidth >= 992;
+
+	const slider = tns({
+		container: 'ol.flex-control-nav',
+		items: isDesktop ? 4 : 4,
+		axis: isDesktop ? 'vertical' : 'horizontal',
+		slideBy: 'page',
+		rewind: true,
+		loop: false,
+		nav: false,
+		controls: false,
+		mouseDrag: true,
+		speed: 400,
+	});
+
+	addNextPrev(
+		document.querySelector('.woocommerce-product-gallery .tns-inner'),
+		slider,
+		isDesktop
+	);
+}
+
 /**
  * Run JS on load.
  */

assets/scss/components/compat/woocommerce/_sidebar.scss

@@ -56,3 +56,95 @@
 		}
 	}
 }
+
+body:not(.sp-slider-gallery) {
+
+	.tns-ovh {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+	}
+
+	.tns-inner {
+		overflow: hidden;
+	}
+
+	/* Make WooCommerce gallery vertical on desktop */
+	@media (min-width: 992px) {
+
+		.tns-visually-hidden {
+			display: none;
+		}
+
+		div.product {
+
+			.onsale {
+				left: 110px;
+			}
+
+			div.images {
+				display: flex;
+				flex-direction: row-reverse;
+				gap: 10px;
+
+				.tns-ovh {
+					width: 100px;
+					flex-direction: column;
+					position: relative;
+
+					.neve-slider-control {
+						position: absolute;
+						z-index: 1;
+						color: var(--nv-text-color);
+						width: 100px;
+						text-align: center;
+
+						&.prev {
+							top: 0;
+						}
+
+						&.next {
+							bottom: 0;
+						}
+
+						&:hover {
+							background-color: var(--nv-site-bg);
+						}
+					}
+				}
+
+				.flex-viewport {
+					width: calc(100% - 100px);
+				}
+
+				.flex-control-nav {
+					display: flex;
+					flex-direction: column;
+					width: 100px;
+					margin-top: -5px;
+
+					li {
+						width: 100px;
+					}
+				}
+			}
+		}
+	}
+
+	/* On mobile, keep horizontal layout */
+	@media (max-width: 991px) {
+
+		div.product {
+
+			div.images {
+
+				.flex-control-nav {
+					flex-direction: row;
+					width: auto;
+					max-height: none;
+					display: flex;
+				}
+			}
+		}
+	}
+}

package.json

@@ -35,7 +35,7 @@
 		{
 			"gzip": false,
 			"running": false,
-			"limit": "33 KB",
+			"limit": "34.1 KB",
 			"path": "assets/js/build/modern/shop.js"
 		},
 		{