Owlcarousel 2在初始化后更改设置

<!-- 引入必要的文件 -->
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<script src="jquery.min.js"></script>
<script src="owl.carousel.min.js"></script>

<!-- 创建容器 -->
<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>

<!-- 初始化Owlcarousel 2 -->
<script>
$(document).ready(function(){
  $('.owl-carousel').owlCarousel();
});
</script>

$('.owl-carousel').owlCarousel({
  loop: true, // 允许循环滑动
  margin: 10, // 图片之间的间距
  nav: true, // 显示导航按钮
  dots: false, // 隐藏小圆点导航
  items: 3, // 每页显示的图片数量
  responsive:{
      0:{
          items:1 // 在小屏幕上显示1张图片
      },
      600:{
          items:3 // 在中等屏幕上显示3张图片
      },
      1000:{
          items:5 // 在大屏幕上显示5张图片
      }
  }
});

$('.owl-carousel').owlCarousel({
  animateOut: 'fadeOut', // 图片离开时的动画效果
  animateIn: 'fadeIn', // 图片进入时的动画效果
});

$('.owl-carousel').owlCarousel({
  autoplay: true, // 自动播放
  autoplayTimeout: 5000, // 自动播放间隔时间（单位：毫秒）
  autoplayHoverPause: true, // 当鼠标悬停在幻灯片上时暂停自动播放
});

$('.owl-carousel').owlCarousel({
  navText: ["<i class='fa fa-chevron-left'></i>", "<i class='fa fa-chevron-right'></i>"], // 自定义导航按钮的HTML代码
});