Reply To: Owl Carousel show images according to variant names

[Support]

Hi,

Unfortunately that is a little complicated to do and that question is a bit beyond from what support can offer.
Our Support Center is here to help all the buyers with questions related to the template, but not customization to the buyers needs. Please consider that for the next questions.

Item support does not include:

– Customization and installation services
– Support for third party software and plug-ins

Support for our items includes:

– Responding to questions or problems regarding the item and its features.
– Fixing bugs and reported issues.
– Providing updates to ensure compatibility with new software versions.

The definition of support we provide is based on Envato/ThemeForest license.

As a bonus we provide this example:

JS: (execute that function when you change the dropdown.

$.ajax({url: "ajax/gallery.html", success: function(result){
	$("#ajaxWrapper").html(result);
	
	theme.fn.intObs( '.thumb-gallery-wrapper', function(){
		var $thumbGalleryDetail = $(this).find('.thumb-gallery-detail'),
			$thumbGalleryThumbs = $(this).find('.thumb-gallery-thumbs'),
			flag = false,
			duration = 300;

		$thumbGalleryDetail
			.owlCarousel({
				items: 1,
				margin: 10,
				nav: true,
				dots: false,
				loop: false,
				autoHeight: true,
				navText: [],
				rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false
			})
			.on('changed.owl.carousel', function(e) {
				if (!flag) {
					flag = true;
					$thumbGalleryThumbs.trigger('to.owl.carousel', [e.item.index-1, duration, true]);

					$thumbGalleryThumbs.find('.owl-item').removeClass('selected');
					$thumbGalleryThumbs.find('.owl-item').eq( e.item.index ).addClass('selected');
					flag = false;
				}
			});

		
		$thumbGalleryThumbs
			.owlCarousel({
				margin: 15,
				items: $(this).data('thumbs-items') ? $(this).data('thumbs-items') : 4,
				nav: false,
				center: $(this).data('thumbs-center') ? true : false,
				dots: false,
				rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false
			})
			.on('click', '.owl-item', function() {
				$thumbGalleryDetail.trigger('to.owl.carousel', [$(this).index(), duration, true]);
			})
			.on('changed.owl.carousel', function(e) {
				if (!flag) {
					flag = true;
					$thumbGalleryDetail.trigger('to.owl.carousel', [e.item.index, duration, true]);
					flag = false;
				}
			});

		$thumbGalleryThumbs.find('.owl-item').eq(0).addClass('selected');
	}, {});
}});

HTML:

<div id="ajaxWrapper"><div>

ajax/gallery.html:

<div class="thumb-gallery-wrapper">
	<div class="thumb-gallery-detail owl-carousel owl-theme manual nav-inside nav-style-1 nav-dark mb-3">

		<div>
			<img src="img/projects/project.jpg" class="img-fluid" alt="Presentation">
		</div>

		<div>
			<img src="img/projects/project-1.jpg" class="img-fluid" alt="Porto Watch">
		</div>

		<div>
			<img src="img/projects/project-2.jpg" class="img-fluid" alt="Identity">
		</div>

		<div>
			<img src="img/projects/project-27.jpg" class="img-fluid" alt="Porto Screens">
		</div>

		<div>
			<img src="img/projects/project-4.jpg" class="img-fluid" alt="Three Bottles">
		</div>

		<div>
			<img src="img/projects/project-5.jpg" class="img-fluid" alt="Company T-Shirt">
		</div>

		<div>
			<img src="img/projects/project-6.jpg" class="img-fluid" alt="Mobile Mockup">
		</div>

	</div>
	<div class="thumb-gallery-thumbs owl-carousel owl-theme manual thumb-gallery-thumbs">

		<div>
			<span class="d-block cur-pointer">
				<img alt="Presentation" src="img/projects/project.jpg" class="img-fluid">
			</span>
		</div>

		<div>
			<span class="d-block cur-pointer">
				<img alt="Porto Watch" src="img/projects/project-1.jpg" class="img-fluid">
			</span>
		</div>

		<div>
			<span class="d-block cur-pointer">
				<img alt="Identity" src="img/projects/project-2.jpg" class="img-fluid">
			</span>
		</div>

		<div>
			<span class="d-block cur-pointer">
				<img alt="Porto Screens" src="img/projects/project-27.jpg" class="img-fluid">
			</span>
		</div>

		<div>
			<span class="d-block cur-pointer">
				<img alt="Three Bottles" src="img/projects/project-4.jpg" class="img-fluid">
			</span>
		</div>

		<div>
			<span class="d-block cur-pointer">
				<img alt="Company T-Shirt" src="img/projects/project-5.jpg" class="img-fluid">
			</span>
		</div>

		<div>
			<span class="d-block cur-pointer">
				<img alt="Mobile Mockup" src="img/projects/project-6.jpg" class="img-fluid">
			</span>
		</div>

	</div>
</div>

---