Owl Carousel参数说明和使用

　　Owl Carousel是个人比较喜欢使用的一个强大、实用但小巧的 jQuery 幻灯片插件，它具有方便，兼容性好，特别是向我所有网站都是使用 bootstrap的自适应网站，就需要再使用一些幻灯片或者特效时候进行PC和移动端的全面兼容，而这个就满足了我的需求，由于经常使用，单每次都要隔一段时间，基本就把上一次使用熟练的参数和使用方法都忘记光了，所以做一份这样的参数记录表帮助自己能更好的记录和使用。

1、首先需要调用默认的Owl Carousel的JS和CSS

<link href="https://cdn.staticfile.org/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />

<link href="style.css" rel="stylesheet" />

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdn.staticfile.org/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

　　这里有一个注意事项和使用技巧，首先把默认的Owl Carousel的.css文件放在前面，再自己写的网站样式.css放在它后面，这样在后面覆盖默认样式的时候更好覆盖，其次默认的Owl Carousel的JS文件可以放在网站最后，不需要放在网站代码前面，提升网站的打开速度。

有了上面的基础代码后，下面就是加载 Owl Carousel

<script>
            $(document).ready(function() {
              $('#client').owlCarousel({
                items: 1,
                loop: true,
                margin: 0,
                navText: ['<i class="fa fa-arrow-left"></i>', '<i class="fa fa-arrow-right"></i>'],
                callbacks: true,
                dots:false,
                nav:true,
                mouseDrag:true,
                autoplay:true,
                autoplayTimeout:2000,
                autoplayHoverPause:true,
              });
            })
          </script>

上面红色部分代码是作用的哪个ID，在一个页面中有多个调用Owl Carousel需要通过不同的id来识别，黄色部分代码是各种属性值，也就是你要起到什么作用，就靠这些属性代码来设置。