Created
April 6, 2016 18:06
-
-
Save ahmadawais/42816a3b0d16c9a9dd3378ec6dae1c34 to your computer and use it in GitHub Desktop.
Owl Carousel: Dynamic Image Pagination on Click
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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]); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment