Блог

Главная - Вопросы по программированию - Карусель не работает после динамического добавления элементов с помощью jQuery

Карусель не работает после динамического добавления элементов с помощью jQuery

#jquery

#jquery

Вопрос:

Я динамически добавлял изображения в карусель, но они не работали. Я получил только изображения, но не формат карусели. это мой код, как показано ниже. 

 <div id="summeritems" class="popular-products-slides owl-carousel">
    <!-- Single Product -->

    <!-- End -->
</div>

// Код Jquery 

 items.forEach(function(item){
var result =  `<div class="single-product-wrapper">
 <div class="product-img">
  <img src="/image/${item.filename}" alt="">
  <div class="product-favourite">
    <a href="#" class="favme fa fa-heart"></a>
  </div>
</div>
<div class="product-description">
  <span>${item.metadata.brand}</span>
  <a href="single-product-details.html">
    <h6>${item.metadata.name}</h6>
  </a>
  <p class="product-price">LKR. 
  ${item.metadata.price}</p>
  <div class="hover-content">
    <!-- Add to Cart -->
    <div class="add-to-cart-btn">
      <a href="#" class="btn essence-btn">Add to 
      Cart</a>
    </div>
  </div>
</div>
</div>`
$('#summeritems').append(result); // Add Images to Navigation Slider

Комментарии:

1. Вы пробовали owl.trigger('refresh.owl.carousel') ? Если вы будете публиковать свой код по фрагментам, вам будет легче помочь.

Ответ №1:

Вам необходимо обновить карусель после добавления новых элементов. Вот так:

 var owl = $('#summeritems');
owl.owlCarousel();

// Your code
items.forEach(function(item){
  var result =  '... HTML of new elements ...';
  $('#summeritems').append(result); // Add Images to Navigation Slider
});

// update carousel at the end
owl.trigger('refresh.owl.carousel');

Для получения дополнительной информации о API очень полезна официальная документация: Owl carousel API

Комментарии:

1. Спасибо за ваш ответ! но мне это не помогло! в любом случае я получил решение для этой проблемы

2. @Harish Добро пожаловать. Вы можете ответить на свой собственный вопрос, так что это будет полезно для других зрителей.

Ответ №2:

     items.forEach(function(item){

              v = '/image/' item.filename;
              image_temp = new Image();
              image_temp.src = v;
              image_temp.onload = function(){
         $('#owl-sunny').owlCarousel().trigger('add.owl.carousel',
         [jQuery('<div class="owl-item"><a href="/'  item.filename  '"><img src="'  v  '"></a><div class="product-description"><span>'   item.metadata.brand   '</span><a href=""><h6>'  item.metadata.name   '</h6></a><p class="product-price">LKR. '   item.metadata.price   '</p></div></div>')]).trigger('refresh.owl.carousel');