<link href="css/owl.carousel.css" rel="external nofollow" rel="stylesheet">
<link href="css/owl.theme.css" rel="external nofollow" rel="stylesheet">
<script src="/UploadFiles/2021-04-02/jquery.min.js">

2、HTML代码


<div id="owl-demo" class="owl-carousel">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
</div>


3、JavaScript


$(function(){
 $('#owl-example').owlCarousel();
});


下面是Owl Carousel的中文参数与api说明：


  
    
      参数
      类型
      默认值
      说明
    
  
  
    
      items
      整数
      5
      幻灯片每页可见个数
    
    
      itemsDesktop
      数组
      [1199,4]
      设置浏览器宽度和幻灯片可见个数，格式为[X,Y]，X 为浏览器宽度，Y 为可见个数，如[1199,4]就是如果浏览器宽度小于1199，每页显示 4 张，此参数主要用于响应式设计。也可以使用 false
    
    
      itemsDesktopSmall
      数组
      [979,3]
      同上
    
    
      itemsTablet
      数组
      [768,2]
      同上
    
    
      itemsTabletSmall
      数组
      false
      同上，默认为 false
    
    
      itemsMobile
      数组
      [479,1]
      同上
    
    
      itemsCustom
      数组
      false
      
    
    
      singleItem
      布尔值
      false
      是否只显示一张
    
    
      itemsScaleUp
      布尔值
      false
      
    
    
      slideSpeed
      整数
      200
      幻灯片切换速度，以毫秒为单位
    
    
      paginationSpeed
      整数
      800
      分页切换速度，以毫秒为单位
    
    
      rewindSpeed
      整数
      1000
      重回速度，以毫秒为单位
    
    
      autoPlay
      布尔值/整数
      false
      自动播放，可选布尔值或整数，若使用整数，如 3000，表示 3 秒切换一次；若设置为 true，默认 5 秒切换一次
    
    
      stopOnHover
      布尔值
      false
      鼠标悬停停止自动播放
    
    
      navigation
      布尔值
      false
      显示“上一个”、“下一个”
    
    
      navigationText
      数组
      [“prev”,”next”]
      设置“上一个”、“下一个”文字，默认是[“prev”,”next”]
    
    
      rewindNav
      布尔值
      true
      滑动到第一个
    
    
      scrollPerPage
      布尔值
      false
      每页滚动而不是每个项目滚动
    
    
      pagination
      布尔值
      true
      显示分页
    
    
      paginationNumbers
      布尔值
      false
      分页按钮显示数字
    
    
      responsive
      布尔值
      true
      
    
    
      responsiveRefreshRate
      整数
      200
      每 200 毫秒检测窗口宽度并做相应的调整，主要用于响应式
    
    
      responsiveBaseWidth
      jQuery 选择器
      window
      
    
    
      baseClass
      字符串
      owl-carousel
      添加 CSS，如果不需要，最好不要使用
    
    
      theme
      字符串
      owl-theme
      主题样式，可以自行添加以符合你的要求
    
    
      lazyLoad
      布尔值
      false
      延迟加载
    
    
      lazyFollow
      布尔值
      true
      当使用分页时，如果跨页浏览，将不加载跳过页面的图片，只加载所要显示页面的图片，如果设置为 false，则会加载跳过页面的图片。这是 lazyLoad 的子选项
    
    
      lazyEffect
      布尔值/字符串
      fade
      延迟加载图片的显示效果，默认以 400 毫秒淡入，若为 false 则不使用效果
    
    
      loop
      布尔值
      false
      无限循环
    
    
      autoHeight
      布尔值
      false
      自动使用高度
    
    
      jsonPath
      字符串
      false
      JSON 文件路径
    
    
      jsonSuccess
      函数
      false
      处理自定义 JSON 格式的函数
    
    
      dragBeforeAnimFinish
      布尔值
      true
      忽略过度是否完成（只限拖动）
    
    
      mouseDrag
      布尔值
      true
      关闭/开启鼠标事件
    
    
      margin
      整数
      0
      幻灯片间距
    
    
      touchDrag
      布尔值
      true
      关闭/开启触摸事件
    
    
      addClassActive
      布尔值
      false
      给可见的项目加入 “active” 类
    
    
      transitionStyle
      字符串
      false
      添加 CSS3 过度效果
    
  


owlcarousel回调函数


  
    
      变量
      类型
      默认值
      说明
    
  
  
    
      beforeUpdate
      函数
      false
      响应之后的回调函数
    
    
      afterUpdate
      函数
      false
      响应之前的回调函数
    
    
      beforeInit
      函数
      false
      初始化之前的回调函数
    
    
      afterInit
      函数
      false
      初始化之后的回调函数
    
    
      beforeMove
      函数
      false
      移动之前的回调函数
    
    
      afterMove
      函数
      false
      移动之后的回调函数
    
    
      afterAction
      函数
      false
      初始化之后的回调函数
    
    
      startDragging
      函数
      false
      拖动的回调函数
    
    
      afterLazyLoad
      函数
      false
      延迟加载之后的回调函数
    
  


owlcarousel自定义事件




  
    
      事件
      说明
    
  
  
    
      owl.prev
      到上一个
    
    
      owl.next
      到下一个
    
    
      owl.play
      自动播放，可传递一个参数作为播放速度
    
    
      owl.stop
      停止自动播放
    
    
      owl.goTo
      跳到第几个
    
    
      owl.jumpTo
      不使用动画跳到第几个
    
  


以上既是jQuery幻灯片插件owlcarousel的中文参数说明与API，如果想修改owlcarousel的样式可以查找owl.carousel.css文件中的对应CSS代码