Автопроигрывание аккордеона

Рейтинг: 1Ответов: 1Опубликовано: 31.10.2014

Переделываю аккордеон, чтобы сделать автопроигрывание слайдов при загрузке.
Никак не пойму принцип, как на jq сделать автопереход на следующую кнопку.

Как сделать саму анимацию перехода на следующую кнопку?

Вызов слайда делаю так:

<!-- start vertical-tabs-container -->
          <div class="vertical-tabs-container">
  <div class="vertical-tabs">
    <a href="#" class="js-vertical-tab vertical-tab is-active" rel="tab1">Item 1</a>
    <a href="#" class="js-vertical-tab vertical-tab" rel="tab2">Item 2</a>
    <a href="#" class="js-vertical-tab vertical-tab" rel="tab3">Item 3</a>
    <a href="#" class="js-vertical-tab vertical-tab" rel="tab4">Item 4</a>
  </div>

  <div class="vertical-tab-content-container">
    <a href="" class="js-vertical-tab-accordion-heading vertical-tab-accordion-heading is-active" rel="tab1">Item 1</a>
    <div id="tab1" class="js-vertical-tab-content vertical-tab-content">
     <img src="">
    </div>

    <a href="" class="js-vertical-tab-accordion-heading vertical-tab-accordion-heading" rel="tab2">Item 2</a>
    <div id="tab2" class="js-vertical-tab-content vertical-tab-content">
        <img src="">
        </div>

    <a href="" class="js-vertical-tab-accordion-heading vertical-tab-accordion-heading" rel="tab3">Item 3</a>
    <div id="tab3" class="js-vertical-tab-content vertical-tab-content">
      <img src="">
    </div>

    <a href="" class="js-vertical-tab-accordion-heading vertical-tab-accordion-heading" rel="tab4">Item 4</a>
    <div id="tab4" class="js-vertical-tab-content vertical-tab-content">
      <img src="">
    </div>
  </div>
</div><!-- end vertical-tabs-container -->

//js-vertical-tab-content 
$(".js-vertical-tab-content").hide();
$(".js-vertical-tab-content:first").show();

/* if in tab mode */

function autoTab() {
  $(".js-vertical-tab-content").hide();
  $("#"+$(".js-vertical-tab").attr("rel")).fadeIn(800);
    };

var timer=setInterval(autoTab, 3000);

Все хорошо, только воспроизводиться с затуханием только одна картинка. Как перейти на следующие блоки с контентом последовательно? Подскажите, пожалуйста, принцип!

Ответы

▲ 2Принят

Объявить глобальную переменную, которая будет считать до $(".js-vertical-tab").length и изменяться внутри function autoTab().

Ещё не нужно забывать про изменение z-index у каждого следующего слайда либо озаботиться тем, чтобы при помощи fadeOut() гасить текущий слайд, потому что, дойдя до 4-го слайда, вам нужно показать опять первый, а он находится выше в DOM-дереве и просто не покажется из-под 4-го.