carousel with rotating text

carousel with rotating text

Hello everyone!

I'm stuck with this, and I was wondering if someone can help me.

- I have a carousel with id: #myCarousel with x children with class name .image

- I have a text box children of  #footer with the class .textCarousel and it has as much children as pictures are with name class .infoBox
- I have a second text box in the same#footer with name class .infoDetails

The job is: the carousel appears in the home page. Each picture has a .infoBox and .infoDetails boxes with different information. When you go to the page, appears the carousel, with the .infoBox box hidden, and its .infoDetails box on the footer. The .infoBox boxes have an arrow on the top. When you click, slides up the .infoBox and when you click the arrow again, slides it down, just leaving the arrow visible.

On the other hand, when you click the arrows of the carousel to change the image, it change the .image to the next one and it has to change the .infoBox and .infoDetails boxes to the next one too, allowing as well, to use the arrow up and down showing the .infoBox of the right .image

I'm very new in all programming, and I'm getting mad.

I have so far done:

     $(document).ready(function()
   {
  $('#arrowBrowseUp').click(function() {
    $('.textCarousel').slideToggle("slow");  
    return false;
  });
   });
      $(document).ready(function()
   {
  $('#arrowBrowseDown').click(function() {
    $('.textCarousel').slideToggle("slow");  
    return false;
  });
   });  

for the arrow showing or hidding the .infoBox

 so I'm doing...:

  $(document).ready(function(){
      
     $myAlbum = $(".textCarousel");     //so here I give a variable to te box containing the .infoBox boxes
     var total = $myAlbum.children().length;   // here I named a variable counting the children of the                                                                                    .textCarousel box and taking the length, to know how many                                                                         .infoBox boxes I have
     
     $(".owl-next").click(function(){                   //then here, when I click the arrow for the next image in the owl                                                                                    carousel
         for (var counter = 0; counter < total; counter++){               //y create a counter, that starts from 0 and                                                                                                   has to go up to many images and boxes are,
                                                                                                  and then????????????????
       
      }
        });   
      });   
   
I really don't know how to continue, if anyone can give me a hand I would gladly appreciate. I think it must be something like I count how many images and boxes, I add a class like .visible to the first one, and then I rotate the class when I click, but no idea how to do it....

Thank you