single_product.js

jQuery( document ).ready( function ( $ ) {

	function initCarouselThumbnail() {

		$( '.woocommerce-product-gallery__trigger' ).prependTo(".woocommerce-product-gallery > .flex-viewport");
		$( 'ol.flex-control-nav' ).wrap("<div class='thumbnails-slider'></div>").addClass('slides');

		var sliderWrap = $('.thumbnails-slider'),
			productGallery = $('.woocommerce-product-gallery'),
			sliderItems = $('.slider-thumbnails > li'),
			itemMargin = 20,
			sliderWidth = sliderWrap.outerWidth(true),
			sliderColumns = productGallery.data('columns'),
			itemWidth = (sliderWidth + itemMargin) / sliderColumns - itemMargin,
			windowWidth = $(window).width();

		function carouselInit() {
			$('.thumbnails-slider').flexslider({
				animation: "slide",
				controlNav: false,
				directionNav: true,
				slideshow: false,
				itemWidth: itemWidth,
				itemMargin: itemMargin,
				prevText: '<i class="fa fa-angle-left" aria-hidden="true"></i>',
				nextText: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
				animationLoop: false,
			});
		}

		function carouselResize() {

			if (windowWidth < 768) {
				sliderColumns = 2;

				itemWidth = (sliderWidth + itemMargin) / sliderColumns - itemMargin;
			}

			sliderItems.css({
				'max-width': itemWidth
			});
		}


		carouselInit();
		carouselResize();

		$(window).on('resize orientationchange', carouselResize);
	}

	$(window).load( function () {
		if ($('body').hasClass('single-product')) {
			initCarouselThumbnail();
		}
	});


} );