Как зациклить добавление класса 'active' в карусели

164

22 февраля 2018, 13:21

У меня есть карусель и dots-навигация, для переключения которой я использую этот скрипт:

$('.owl-dot').click(function() { 
  var $current = $('.owl-dot.active'); 
  $current.removeClass('active'); 
  $current.next('.owl-dot').addClass('active'); 
});

.active { 
  color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="slider-dots"> 
  <div class="owl-dot active">active</div> 
  <div class="owl-dot">active</div> 
  <div class="owl-dot">active</div> 
</div>

Но когда доходит до конца, то последний .owl-dot перестает быть активным. Как это исправить, зациклив добавление класса?

Answer 1

$('.owl-dot').click(function() { 
  $('.owl-dot').removeClass('active'); 
  $(this).addClass('active'); 
});

.active { 
  color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="slider-dots"> 
  <div class="owl-dot active">active</div> 
  <div class="owl-dot">active</div> 
  <div class="owl-dot">active</div> 
</div>