owl carousel Cannot read properties of undefined (reading 'destroy')

这个错误通常是因为你在调用 `destroy` 方法之前没有正确初始化 `owl carousel` 插件。你需要确保在调用 `destroy` 方法之前，`owl carousel` 已经被正确初始化。你可以尝试在调用 `destroy` 方法之前添加一个判断，判断 `owl carousel` 是否已经被正确初始化。如果没有被正确初始化，你需要先初始化 `owl carousel`，然后再调用 `destroy` 方法。

另外，如果你使用的是最新版本的 `owl carousel`，你可以尝试使用 `owlCarousel2` 方法代替 `owlCarousel` 方法，因为 `owlCarousel` 方法已经被弃用了。

相关问题

Owl Carousel 大图，小图联动轮播例子

下面是一个使用 Owl Carousel 实现大图和小图联动轮播的例子，你可以根据自己的需求进行修改和定制：

HTML 代码：

<div class="owl-carousel owl-theme">
  <div class="item">
    <img src="big-image-1.jpg" alt="Big Image 1">
  </div>
  <div class="item">
    <img src="big-image-2.jpg" alt="Big Image 2">
  </div>
  <div class="item">
    <img src="big-image-3.jpg" alt="Big Image 3">
  </div>
</div>

<div class="owl-carousel owl-theme thumbs">
  <div class="item">
    <img src="small-image-1.jpg" alt="Small Image 1">
  </div>
  <div class="item">
    <img src="small-image-2.jpg" alt="Small Image 2">
  </div>
  <div class="item">
    <img src="small-image-3.jpg" alt="Small Image 3">
  </div>
</div>

CSS 代码：

.owl-carousel {
  margin-bottom: 20px;
}

.thumbs .item {
  margin-right: 10px;
}

.thumbs .item:last-child {
  margin-right: 0;
}

.thumbs .item img {
  width: 100%;
  height: auto;
  cursor: pointer;
  opacity: 0.5;
}

.thumbs .item.active img {
  opacity: 1;
}

JavaScript 代码：

$(document).ready(function() {
  var bigCarousel = $('.owl-carousel');
  var thumbsCarousel = $('.thumbs');

  bigCarousel.owlCarousel({
    items: 1,
    loop: true,
    dots: false,
    nav: true,
    navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>']
  });

  thumbsCarousel.owlCarousel({
    items: 3,
    loop: true,
    dots: false,
    nav: false,
    margin: 10,
    responsive: {
      0: {
        items: 3
      },
      600: {
        items: 4
      },
      1000: {
        items: 5
      }
    }
  });

  thumbsCarousel.on('click', '.item', function(e) {
    e.preventDefault();
    var index = $(this).index();
    bigCarousel.trigger('to.owl.carousel', [index, 300, true]);
    thumbsCarousel.find('.item.active').removeClass('active');
    $(this).addClass('active');
  });

  bigCarousel.on('changed.owl.carousel', function(event) {
    var index = event.item.index;
    thumbsCarousel.find('.item.active').removeClass('active');
    thumbsCarousel.find('.item').eq(index).addClass('active');
  });
});

在上面的例子中，我们使用了两个 Owl Carousel 实例，一个用于显示大图，另一个用于显示小图。我们通过 thumbsCarousel.on('click', '.item', function(e) {}); 和 bigCarousel.on('changed.owl.carousel', function(event) {}); 两个事件来实现大图和小图的联动效果。