tengo la siguiente función:
// Go to the previous item $(".owl-prev-custom").click(function () { $(".owl-carousel-timeline .item.item-year-active") .removeClass("item-year-active") .parent() .prev() .children() .addClass("item-year-active"); var theHash = $(".owl-carousel-timeline .item.item-year-active").attr( "data-hash" ); });Con este html:
<div class="owl-carousel owl-carousel-timeline"> <div class="owl-item"> <div class="item" data-hash="2006"> <div class="carousel-card"></div> </div> </div> <div class="owl-item"> <div class="item" data-hash="2009"> <div class="carousel-card"></div> </div> </div> <div class="owl-item"> <div class="item" data-hash="2010"> <div class="carousel-card"></div> </div> </div> <div class="owl-item"> <div class="item" data-hash="2013"> <div class="carousel-card"></div> </div> </div> <div class="owl-item"> <div class="item item-year-active" data-hash="2013-2"> <div class="carousel-card"></div> </div> </div> </div> <div class="owl-nav owl-nav-timeline"> <div class="owl-prev-custom"></div> <div class="owl-next-custom"></div> </div> El problema que tengo es que el evento click, cuando llega al primer ítem .owl-item:first (o último ítem .owl-item:last ), no se detiene y desaparece la clase .item-year-active ya que va a un elemento antes del primer owl-item . Quisiera saber como detener mi funcion en el primer .owl-item y en el ultimo .owl-item para que esto no suceda.
Avíseme si me explico bien, para dar más detalles, el inglés no es mi idioma principal :)
Compruebe si el elemento activo es el primer elemento y sáltelo cuando llegue al final.
// Go to the previous item $(".owl-prev-custom").click(function() { if (!$(".owl-carousel-timeline .item.item-year-active").is(".owl-carousel-timeline .item:first")) { $(".owl-carousel-timeline .item.item-year-active") .removeClass("item-year-active") .parent() .prev() .children() .addClass("item-year-active"); } var theHash = $(".owl-carousel-timeline .item.item-year-active").attr( "data-hash" ); });