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) {}); 两个事件来实现大图和小图的联动效果。

owl-carousel 的手动调用

owl-carousel是一个基于jQuery的响应式轮播插件。

为了手动调用owl-carousel，我们需要先引入jQuery和owl-carousel的相关文件。然后通过选择器选择要使用carousel的元素。

在HTML中，我们可以使用以下代码来设置carousel的基本结构：

<div class="owl-carousel">
  <div class="item"><img src="image1.jpg" alt="Image 1"></div>
  <div class="item"><img src="image2.jpg" alt="Image 2"></div>
  <div class="item"><img src="image3.jpg" alt="Image 3"></div>
</div>

接下来，在JavaScript中，我们需要在DOM加载完成后，初始化carousel并设置相关参数：

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    items: 3,
    loop: true,
    navigation: true,
    autoplay: true,
    autoplayTimeout: 3000
  });
});

在这个例子中，我们初始化了一个每次显示3个item的carousel，启用了循环、导航和自动播放功能，每个item之间停留3秒钟。

现在，我们可以在需要手动调用carousel的时候调用相应的方法。owl-carousel提供了一些实用的方法来控制carousel的行为。下面是一些常用的方法：

1. `next()`：手动切换到下一个item。
2. `prev()`：手动切换到上一个item。
3. `to(position)`：手动切换到指定位置的item。
4. `play()`：开始自动播放。
5. `stop()`：停止自动播放。

使用这些方法，我们可以通过点击按钮、键盘事件等方式来手动控制carousel的切换。

例如，如果我们有一个"下一页"按钮，我们可以将以下代码添加到相应的点击事件处理程序中：

$('.next-button').click(function(){
  $('.owl-carousel').trigger('next.owl.carousel');
});

这将触发carousel的`next.owl.carousel`事件，并自动切换到下一个item。

类似地，我们可以使用其他方法来实现特定的手动调用效果。

总结起来，owl-carousel的手动调用可以通过触发相应的事件来实现，根据需要选择合适的方法来实现手动切换、自动播放等功能。