Замените текущие предметы, используя Сову Карусель 2

Как можно заменить / восстановить owl carousel предметы с новым?

Описание

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

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />

<div class="owl-carousel owl-theme">
    <div class="item">
      <h4>Old 1-1</h4></div>
    <div class="item">
      <h4>Old 2-1</h4></div>
    <div class="item">
      <h4>Old 3-1</h4></div>
    <div class="item">
      <h4>Old 4-1</h4></div>
  </div>

Источник

1 ответ

Решение

Согласно документации Owl Carousel 2, вы можете использовать replace.owl.carousel событие.

replace.owl.carousel

Тип: triggerable Параметр: data

Удаляет текущий контент и добавляет новый, переданный в параметре.

использование

Сначала вам нужно использовать replace триггер затем добавить новые данные с refresh спусковой крючок. Не использовать destroy или же re-initialize

Пример 1 / Обновление / Замена

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true
});

$('#reb').click(function() {
  var html = '<div class="owl-item"><h4>1-2</h4></div><div class="item"><h4>2-2</h4></div><div class="item"><h4>3-2</h4></div><div class="item"><h4>4-2</h4></div><div class="item"><h4>2-2</h4></div>';
  $('.owl-carousel').trigger('replace.owl.carousel', html).trigger('refresh.owl.carousel');
});
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />

<div class="owl-carousel owl-theme">
  <div class="item">
    <h4>Old 1-1</h4>
  </div>
  <div class="item">
    <h4>Old 2-1</h4>
  </div>
  <div class="item">
    <h4>Old 3-1</h4>
  </div>
  <div class="item">
    <h4>Old 4-1</h4>
  </div>
</div>

<a id="reb" class="btn btn-success">Rebuild</a>

Пример 2 / Обновить / Добавить

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true
});

$('#reb').click(function() {
  var html = '<h4>New item</h4>';
  $('.owl-carousel').trigger('add.owl.carousel', html).trigger('refresh.owl.carousel');
});
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />

<div class="owl-carousel owl-theme">
  <div class="item">
    <h4>Old 1-1</h4>
  </div>
  <div class="item">
    <h4>Old 2-1</h4>
  </div>
  <div class="item">
    <h4>Old 3-1</h4>
  </div>
  <div class="item">
    <h4>Old 4-1</h4>
  </div>
</div>

<a id="reb" class="btn btn-success">Add</a>

Источник
Другие вопросы по тегам