How to get ID value of parents of previous and next carousel slides? (jQuery)

Question

I am trying to write script that will assign description to carousel's "prev" and "next" links. Descriptions need to be read from carousel item ID attribute based on numeric value of current slide (that can be accessed via carousel API - see first line of JS code - returns numeric value of carousel item starting from 1)

HTML:

<div id="carousel-wrapper" class="content-promo carousel-wrapper>
  <div class='wrapper'>

    <div id='features' class=' ccm-block-styles'>
      <div id='slide-1' class='carousel-slide'>
         <!-- SOME CONTENT  -->
      </div>
    </div>

    <div id='lifestyle' class=' ccm-block-styles'>
      <div id='slide-2' class='carousel-slide'>
         <!-- SOME CONTENT  -->
      </div>
    </div>

    <div id='food-&-drink' class=' ccm-block-styles'>
      <div id='slide-3' class='carousel-slide'>
         <!-- SOME CONTENT  -->
      </div>
    </div>

  </div> <!-- End of .wrapper -->
</div> <!-- End of #carousel-wrapper -->

JS:

currentslide = $( ".carousel-wrapper" ).rcarousel( "getCurrentPage" );
prevslide = currentslide - 2; // as eq() counts from 0
prevslideidtext = $(".carousel-slide").eq( prevslide ).parent().attr( "id" );
nextslide = currentslide;
nextslideidtext = $(".carousel-slide").eq( nextslide ).parent().attr( "id" );

Unfortunately prevslideidtext instead of returning ID of previous slide parent DIV returns ID of current slide parent when nextslideidtextis undefined.

Example of results (when first slide is current slide):

currentslide = 1
prevslide = -1
nextslide = 1
prevslideidtext = features
nextslideidtext = undefined

There are six DIVs with carousel-slide class (only 3 are shown in HTML code above) but JS script above behaves as there was only one.

What I am doing wrong?

I don't insist on using eq();it just seemed to me to be clear and easy way to achieve effect I need.

(I am aware that eq() creates new empty item when index passed to eq() is out of range, I was going to sort it out - for last slide - later)

Thanks

Answer 1

Workaround I found for my problem:

// 1. Read and save old carousel navigation text (like "Prev" and "Next")
carouselprevoldtext = $('#ui-carousel-prev').children(".carousel-control-text").html();
carouselnextoldtext = $('#ui-carousel-next').children(".carousel-control-text").html();
// 2. How many slides?
maxslidenumber = $(".carousel-slide").length;
// 3. Create an array with all slides' IDs (in this particular case I use parent() as ID is assigned through CMS by user not hardcoded - and extra DIV is added by CMS)
slideidarray = {};
$(".carousel-slide").each(
    function(index){
    slideidarray[index] = $ ( this ).parent().attr('id');
}                      
);
// 4. Run the carousel
$( ".carousel-wrapper" ).rcarousel({ OPTIONS HERE });
// 5. Find current slide
currentslide = $( ".carousel-wrapper" ).rcarousel( "getCurrentPage" ); // starts from 1 not from 0
// 6. Find previous and next slides ID texts
// A. For first slide - previous slide is the last one
if (currentslide == 1) {
    prevslideidtext = slideidarray[maxslidenumber - 1];
    nextslideidtext = slideidarray[1];
}
else {
    prevslideidtext = slideidarray[currentslide - 2]; // as arrays count from 0
    nextslideidtext = slideidarray[currentslide];
    // B. For last slide - next slide is the first one
    if (currentslide == maxslidenumber) {
    nextslideidtext = slideidarray[0];
    }
}
// 7. Create new carousel navigation text
carouselprevupdhtml = "<span class='carousel-control-text'>" + carouselprevoldtext + ": </span><span class='carousel-control-title'>" + prevslideidtext + '</span>';
carouselnextupdhtml = "<span class='carousel-control-text'>" + carouselnextoldtext + ": </span><span class='carousel-control-title'>" + nextslideidtext + '</span>';
// 8. Assign it to carousel navigation
$('#ui-carousel-prev').html( carouselprevupdhtml );
$('#ui-carousel-next').html( carouselnextupdhtml );

Of course steps 5 to 8 needs to be repeated each time when slide is changed.

Answer 2

Hi well first for me to help you better can you do the following:

1.) Place your sample code in JSFiddle or CodePen. Then post that link back here. http://jsfiddle.net/ http://codepen.io/

Just a tip I would recommend that you change the classname or the ID name you have above. It's not good practice to have both an ID and a class with the same name.

You have the following:

<div id="carousel-wrapper" class="content-promo carousel-wrapper>

---

Update: Appears you need to close the quote from the class attribute for the #carousel-wrapper element.