I have an AnythingSlider within an AnythingSlider can I style the current slide for both sliders?

Here's the example: http://ashleybest.co.uk/mottie_is_the_best/index.html

What I’m trying to do is style the links ('Aaaa', 'Bbbb' etc) that are on slide ‘one’ the same as the external links that control the main slider when it is on the current slide. The links on slide 'one' control the second slider on the right.

How is it possible?

Here's how the css looks:

.link-1.current, .link-1:hover { text-decoration:underline; color:#BAA5EC; }
.link-2.current, .link-2:hover { text-decoration:underline; color:#BAA5EC; }
.link-3.current, .link-3:hover { text-decoration:underline; color:#BAA5EC; }
.link-4.current, .link-4:hover { text-decoration:underline; color:#BAA5EC; }
.link-a.current, .link-a:hover { text-decoration:underline; color:#BAA5EC; }
.link-b.current, .link-b:hover { text-decoration:underline; color:#BAA5EC; }
.link-c.current, .link-c:hover { text-decoration:underline; color:#BAA5EC; }
.link-d.current, .link-d:hover { text-decoration:underline; color:#BAA5EC; }

Solution

With a demo of the solution

HTML

<table>
<tbody>
<tr>
  <td id="sliderbg" valign="bottom">
    <div class="nav1">
      <a class="nav link-1" href="#1"><span>One</span></a>
      <a class="nav link-2" href="#2"><span>Two</span></a>
      <a class="nav link-3" href="#3"><span>Three</span></a>
      <a class="nav link-4" href="#4"><span>Four</span></a>
    </div>
    <ul class="slider1">
      <li>
        <div class="nav2">
          One:
          <a class="nav link-a" href="#2">Aaaa</a> |
          <a class="nav link-b" href="#3">Bbbb</a> |
          <a class="nav link-c" href="#4">Cccc</a> |
          <a class="nav link-d" href="#5">Dddd</a>
        </div>
      </li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
    </ul>
  </td>
  <td id="sliderbg" valign="bottom">
    <ul class="slider2">
      <li>Select an item on the left to view here</li>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
  </td>
</tr>
</tbody>
</table>

CSS

.slider1, .slider2, .slider1 li, .slider2 li {
  width: 300px;
  height: 200px;
  list-style: none;
}

#sliderbg {
  background-color: #444;
  color: #ddd;
}

.nav { text-decoration:none; color:#fff; }
.nav.current, .nav:hover { text-decoration:underline; color:#BAA5EC; }

Script

$(function() {
  $('.slider1').anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    onInitialized: function(e, slider) {
      $('.nav1').find('a').eq(slider.currentPage - 1).addClass('current');
    },
    onSlideInit: function(e, slider) {
      $('.nav1').find('a').removeClass('current').eq(slider.targetPage - 1).addClass('current');
    },
  });
  // set up external links
  $('.nav1 a').click(function() {
    var slide = $(this).attr('href').substring(1);
    $('.slider1').anythingSlider(slide);
    return false;
  });

  $('.slider2').anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    onInitialized: function(e, slider) {
      $('.nav2').find('a').eq(slider.currentPage - 1).addClass('current');
    },
    onSlideInit: function(e, slider) {
      $('.nav2').find('a').removeClass('current')
      // subtract 2 because we don't have a link to the first slide
      .eq(slider.targetPage - 2).addClass('current');
    },
  });
  // set up external links
  $('.nav2 a').click(function() {
    var slide = $(this).attr('href').substring(1);
    $('.slider2').anythingSlider(slide);
    return false;
  });
});