Owl Carousel 2 удалить специфику c элемент - PullRequest
Новая
       183

Owl Carousel 2 удалить специфику c элемент

0 голосов
/ 21 июня 2020

Я использую Owl Carousel 2, и мой код HTML следующий. Каждое изображение будет иметь маленький значок «x» в верхнем правом углу, при нажатии я хочу, чтобы изображение было удалено из карусели.

При первом нажатии, это работает хорошо, потому что индекс прошел к функции "remove_image" правильно. Но при втором щелчке по другому изображению индекс больше не будет правильным.

Например: 1-й щелчок по image2.jpg, индекс, переданный в «remove_image», равен 1, это правильно. Изображение правильно удалено из Owl Carousel 2.

2-й щелчок по image4.jpg, в remove_image передается индекс 3. это неверный индекс. Это потому, что Owl Carousel 2 была обновлена ​​после удаления image2. Теперь правильный индекс для image4.jpg - 2.

Как я могу исправить эту проблему? Пожалуйста помоги. Спасибо.

image 
function remove_image(index) {
    $('.owl-carousel').owlCarousel('remove', index).owlCarousel('update');
}

1 Ответ

1 голос
/ 21 июня 2020

Вы используете фиксированные индексы при звонках на remove_image. Поскольку они не обновляются по мере удаления элементов, эти фиксированные индексы становятся неточными.

Быстрым (но не обязательно лучшим) исправлением было бы использование this вместо фиксированных индексов для передачи в элементы привязки, а затем ваша функция получает целевой индекс из этого:

image 
function remove_image(trigger) {
    var $item = $(trigger).closest('.owl-item');
    var index = $item.closest('.owl-stage').children().index($item);
    $item.closest('.owl-carousel').owlCarousel('remove', index).owlCarousel('update');
}

.owl-stage и .owl-item - это некоторые из нескольких элементов, которые добавляются при инициализации карусели совы. .owl-stage находится между предоставленным пользователем контейнером и элементами, обертывая эти элементы. .owl-item обертывает каждый элемент и является дочерним элементом .owl-stage.

Ссылки:

...