Search code examples
javascriptjquerycssnivo-slider

Nivo Slider Control Nav Animation with javascript

Basically I want to move the div.nivo-controlNav 125px to the left x times where x is the number of a tags inside it. BUt my code is not working...

The code is from an adult site. Be careful opening the images.

HTML

<div style="visibility: visible;" class="nivo-controlNav">
    <a class="nivo-control" rel="0">
      <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-01.jpg" alt="">
    </a>
    <a class="nivo-control" rel="1"><img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-02.jpg" alt=""></a>
    <a class="nivo-control" rel="2"><img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-03.jpg" alt=""></a>
    <a class="nivo-control" rel="3"><img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-04.jpg" alt=""></a>
    <a class="nivo-control" rel="4">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-05.jpg" alt=""></a>
    <a class="nivo-control" rel="5">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-06.jpg" alt=""></a>
    <a class="nivo-control" rel="6">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-07.jpg" alt=""></a>
    <a class="nivo-control active" rel="7"><img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-08.jpg" alt=""></a>
    <a class="nivo-control" rel="8">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-09.jpg" alt=""></a>
    <a class="nivo-control" rel="9">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-10.jpg" alt=""></a>
    <a class="nivo-control" rel="10">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-11.jpg" alt=""></a>
    <a class="nivo-control" rel="11">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-12.jpg" alt=""></a>
    <a class="nivo-control" rel="12">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-13.jpg" alt=""></a></div>

JS

jQuery(document).ready(function($) {
  var imgs = $(".nivo-controlNav > a").length;
  for (var i = 0; i < imgs; i++) {
    $('.nivo-controlNav').animate({'margin-left': '-125px'}, 500);
  }
});
Solution

  • Currently you're moving the div.nivo-controlNav only once, you can move it depending on the amount of images with the following adjustment:

    var imgs = $(".nivo-controlNav > a").length;
var leftVal;
for (var i = 0; i < imgs; i++) {
  lefVal = i * 125;
  $('.nivo-controlNav').animate({
    'margin-left': -lefVal
  }, 500);
}