title: Nivo Slider: Skype.com Carousel Effect - Change CSS for Nav based on CurrentSlide
body: <p>I have been trying to create a slider based on Nivo Slider that looks and functions similar to the Carousel found at <a href="http://www.skype.com/intl/en/home" rel="nofollow noreferrer">http://www.skype.com/intl/en/home</a></p>
  
  <p>I have viewed questions by <a href="https://stackoverflow.com/questions/5441617/showing-slide-count-with-nivo-slider">Ashfame</a> and by <a href="https://stackoverflow.com/questions/7947308/change-css-based-on-nivo-slider-current-image">Chris_Mac</a>, however I have been going round in circles for most of the weekend. Now back at square one and starting from the basics.</p>
  
  <p>Thus far I have managed to get the navigation working such that mouseenter on a particular nav item triggers nivo-controlNav to display the correct slide and pauses the slider:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;    
  $("ul#nav_1").mouseenter(
      function () {
         $(".nivo-controlNav a:nth-child(2)").click();
         $('#slider').data('nivoslider').stop();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I also created a subsequent mouseleave function for the nav items (1,2,3 etc.)</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $("ul#nav_1,ul#nav_2,ul#nav_3").mouseleave(
       function () {
         $('#slider').data('nivoslider').start();
        });
      &lt;/script&gt;
  </code></pre>
  
  <p>I'm now stuck at the part where non-mouse events come in. When the slider loads it should update the nav css to highlight the current nav item selected. Here is what I've got (not a lot I know, but I'm trying).</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(window).load(function() {
      $('#slider').nivoSlider({
         beforeChange: function(){ // this function should load css styles
            var slide_num = $('#slider').data('nivo:vars').currentSlide;
            function scrollBannerCss () {
               if (slide_num == 1) {
                 $("ul#nav_1").css("backgound-color", "blue");
                   }
             }
         },
         afterChange: function(){ // this function should unload css styles
      });
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>Then the simple html nav menu:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
     &lt;li id="nav_1"&gt;button 1&lt;/li&gt;
     &lt;li id="nav_2"&gt;button 2&lt;/li&gt;
     &lt;li id="nav_3"&gt;button 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Any help/ideas/musings would be hugely appreciated!</p>