es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Eliminando elemento activo (centrado) en OwlCarousel.

02 Aug, 2023 Programación

Quiero que el usuario pueda eliminar el elemento activo/centrado en un OwlCarousel. La única pieza de código que encontré con respecto a la eliminación de elementos fue esta, así que parece ser una pregunta bastante rara:

$(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel');

Funciona, pero se refiere al ID del elemento actual dentro del carrusel, es decir, ya no funciona si doy números desde mi HTML estático sin volver a indexar. Aquí hay un ejemplo:
https://jsfiddle.net/87x312wv/6

¿Existe alguna manera mejor en lugar de contar el ID del elemento? Más bien estoy buscando algo como esto, sería mucho más natural:

$(".owl-carousel").trigger('remove.owl.carousel', $('owl-carousel .active')).trigger('refresh.owl.carousel');

¿Alguna idea?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás intentando eliminar el elemento activo/centrado en un OwlCarousel y has encontrado un código que funciona pero solo hace referencia al ID del elemento actual dentro del carrusel. Esto significa que ya no funciona si le das números desde tu HTML estático sin reindexar.

    Estás buscando una mejor manera de eliminar el elemento sin tener que contar el ID del elemento. Te gustaría usar algo más natural como $(".owl-carousel").trigger('remove.owl.carousel', $('owl-carousel .active')).trigger('refresh.owl.carousel');

    Una posible solución podría ser usar la función current() proporcionada por OwlCarousel. La función current() te dará el ID del elemento actual dentro del carrusel. Luego puedes usar este ID para eliminar el elemento.

    Aquí tienes un ejemplo de fragmento de código que puedes usar para eliminar el elemento activo/centrado:

    var owl = $('.owl-carousel');
var currentItem = owl.find('.owl-item.active').data('owl-item').index;
owl.trigger('remove.owl.carousel', [currentItem]).trigger('refresh.owl.carousel');

    En este fragmento de código, primero encontramos el elemento actual usando la función current() y luego desencadenamos el evento de eliminación con el ID del elemento actual. Luego desencadenamos el evento de actualización para actualizar el carrusel.

    ¡Espero que esto te ayude!

Comments are closed.