Add next / prev image caption to slider navigation buttons

I'm trying to make the NEXT and PREVIOUS buttons in my slider show the caption for the next and previous images, respectively. It should be that when you hover over the NEXT button the caption from the next image in the slider appears. Ditto to previous button.

I've got a slider that is created with the gallery field in Advanced Custom fields. I have multiple sliders on the same page, all using the same markup. The only difference is the background images, and the captions of each image. The markup is simplified below, imagine 3-4 iterations of the code below on one page (again, the only thing that is different between each iteration of the slider is the background images and the captions)

<div class='theslider'>
<div class="controls">
     <button class="prev"></button>
     <button class="next"></button>
</div>
<div class="the-slides">
   <ul>
     <li><div class='slide' style="background-image...">
         <span>item caption 1</span>    
     </li>
     <li><div class='slide' style="background-image...">
         <span>item caption 2</span>   
     </li>
     <li><div class='slide' style="background-image...">
         <span>item caption 3</span>
     </li>
  </ul>
</div>

I am trying to use jQuery .clone and .html functions to move the captions from the slide li elements into the slider buttons.

The way the slider works, the current image is ALWAYS the FIRST li element. Therefore, the "NEXT" button should have the caption from "li:nth-child(2)" and the "PREVIOUS" button should have the caption from "li:last-child".

I've been able to get some progress with the following:

var $thecaption = jQuery('li:nth-child(2) span');
var $button = jQuery($thecaption).closest('.theslider').find('button.next');
var $nextcaption = jQuery($thecaption).clone();
jQuery($button).html($nextcaption);

But the end result is a NEXT Button with the captions from every slider on the page.

<button class="next">
    <span>caption 2</span>
    <span>caption 2</span>
    <span>caption 2</span>
</button>

How do I specify that only the caption that shares the same parent element ".slider" as the target Next Button gets moved to that button?

Any help is greatly appreciated. Thanks in advance.

Answers


I figured it out. I was using the wrong element to use as a common ancestor to ensure that the $button and $thecaption were a part of the same slider.

*Note: The slider button is wrapped in another span with the class "control_next".

<span class="control_next">
   <button class="next"></button>
</span>

Using the button "control_next" element as a trigger I was able to...

A: move up along it's ancestors to find the closest parent ".theslider", then from there find the caption that is the child of that ".theslider" parent, which is '.slides-list li:nth-child(2) span'.

var $thecaption = jQuery(this).closest('.theslider').find('.slides-list li:nth-child(2) span');

B: Find the span where the caption is to be placed, using the same origin (the trigger)

var $button = jQuery(this).find('.btn-caption.right');

C: clone the caption, and set it as a variable to be placed.

var $nextcaption = jQuery($thecaption).clone();

D: Execute on each slide. (The slider shifts the li elements, appending the last li slide to the top and so on as the slides are cycled through: Slider code based on this)

Here's the working code below:

jQuery(document).ready(function(){
jQuery('.control_next').mouseenter(function() {
var $thecaption = jQuery(this).closest('.theslider').find('.slides-list li:nth-child(2) span');
var $button = jQuery(this).find('.btn-caption.right');
var $nextcaption = jQuery($thecaption).clone();
jQuery($targetbutton).html($nextcaption);
});
});

Need Your Help

XML Deserialize in Windows Phone C#

c# windows-phone-7 xml-serialization

i'm working on WP Application for news portal, I need to parse various feeds. Standard feed looks like this: