Owl Carousel: Dynamic Image Pagination on Click

single-vr_rental.js

/**
			 * Click on the pagination thumbnail
			 * to drag the owlcarosel to a particular clicked image
			 * and highlight its thumbnail.
			 *
			 * @author Ahmad Awais
			 * @since  1.0.0
			 */
			$('.vr_carousel__pagDiv').click(function() {
				// Efficient $this.
				var $this = $(this);

				// Get the imageno from data.
				var imageno = $this.data('imageno');
				// console.log(imageno);

				// remove add highlight class.
				$('.vr_carousel__pagDiv > div').removeClass('vr_carousel__currentSlide');
				$this.children().addClass('vr_carousel__currentSlide');

				// These are 0th based indexed no.s.
				// Images are 0th index so this image is imageno -1
				var thisimage = imageno - 1;
				// console.log(thisimage);

				// Triger the same image when clicked.
				vr_rsingle.trigger('to.owl.carousel', [thisimage, 400, true]);
			});