Add CSS class to external links depending of the active slide

benymypony's Avatar

benymypony

25 Oct, 2012 11:21 PM

Hello,

I have a slider in a div, and in another div I have the menu that command the slider with goTo function.
Here is what my HTML looks like :

<div id="menu">
  <li><a class="menu-home" href="#">Home</a></li>
  <li><a class="menu-contact" href="#">Contact</a></li>
</div>
<div id="royalslider">
  <div class="home">Lorem ipsum.</div>
  <div class="contact">Dolor sir amet.</div>
</div

Here is how I manage slides (it works perfectly) :

$('.home').click(function(e) {
  si.goTo(0);
  return false;
});

I need that if I click on menu CONTACT, the slider goes to slide 2 (or to .contact) and the the CONTACT in the menu get a class (or bold for example). Then if I click on HOME the slider goes to slide 1 and HOME will be bold and CONTACT regular.

Do you have an idea about how to do that ?

Thanks in advance !
Best,

Beny

EDIT : An important thing, the menu item clicked must be bold if I click on, or if I slide manually (drag) between slides.

  1. Support Staff 1 Posted by Dmitry Semenov on 27 Oct, 2012 02:42 PM

    Dmitry Semenov's Avatar

    Hi,

    I don't really understand the question. You don't know how to add class to element via jQuery? Or you don't know how to listen for slide change event?

    Dmitry

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac