Traverse elements and perform same function for each of them

Question

I’m doing a gallery where they’ll have a button next to and previous. When you click one of these two buttons, you will execute the function that is up to each of them to perform. There will be more than one gallery on the same page. I will rename the ID of the <div> for example galeria_1, galeria_2, galeria_3. But in the code jquery I have below, wanted if the user click on proximo_2 then he move on to the next to galeria_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 that same script to run for all the gallery I have, but the action to run according to the button proximo_x or anterior_y

Answer 1

Try to do 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 doesn’t work out, I believe you will have to multiply the script you are using according to the amount of galleries you will have.