Scroll elements and perform the same function for each of them

Question

Scroll elements and perform the same function for each of them

Navigation

#1 by (0 votes)

0

I'm making a gallery where it will have a next and previous button. Clicking one of these two buttons will perform the function that each one of them has to perform. There will be more than one gallery on the same page. I will rename the ID of <div> for example gallery_1 , gallery_2 , gallery_3 . But in the code jquery that I have below, I wanted the user to click on next_2 so he moves on to the next gallery_2 as per the plugin code below:

$(document).ready(function() {

      var owl = $("#galeria");

      owl.owlCarousel({
          items : 5, //10 items above 1000px browser width
          pagination: false,
          itemsDesktop : [1000,5], //5 items between 1000px and 901px
          itemsDesktopSmall : [900,3], // betweem 900px and 601px
          itemsTablet: [600,2], //2 items between 600 and 0
          itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
      });

        $(".proximo").click(function(){
            owl.trigger('owl.next');
          });

          $(".anterior").click(function(){
            owl.trigger('owl.prev');
          });
});

I want this same script to run for all the gallery that I have, but that the action executes according to the button proximo_x or anterior_y

javascript jquery plugin

asked by anonymous 25.06.2016 / 22:01

1 answer

Problem with Fetch Lazy [Spring Boot] [Thymeleaf] Set listview cell color for specific words

score 0 · Answer 1

Try doing something like this:

var owl = $("#galeria1, #galeria2, galeia3");

$("#galeria1 .proximo").click(function(){ owl.trigger('owl.next'); });

$("#galeria1 .anterior").click(function(){ owl.trigger('owl.prev'); });

$("#galeria2 .proximo").click(function(){ owl.trigger('owl.next'); });

$("#galeria2 .anterior").click(function(){ owl.trigger('owl.prev'); });

$("#galeria3 .proximo").click(function(){ owl.trigger('owl.next'); });

$("#galeria3 .anterior").click(function(){ owl.trigger('owl.prev'); });

If it does not work out, I believe you will have to multiply the script you are using according to how many galleries you will have.