html

<link rel="stylesheet" href="OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css">
<script src="OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script>


<div id="show">
    <div class="owl-carousel" id="show_slider">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</div>

css

/* 左右简头样式*/

#show .owl-next{
	position:absolute;
	top:50%;
	margin-top:-24px;
	right:0px;
	z-index:9999;
	color:#164b72;
}
#show .owl-prev{
	position:absolute;
	top:50%;
	margin-top:-24px;
	left:0px;
	z-index:9999;
	color:#164b72;
}
#show .iconfont{
	font-size:48px;
}
#show .iconfont{
	font-size:48px;
	font-weight:700;
}
#show .owl-nav .disabled{
	color:#ddd;
}

js

 $('#show_slider').owlCarousel({
		smartSpeed: 1000, //切换速度
		autoplay:true,//自动轮播
		autoplayTimeout:5000,
                navText: false, //左右箭头html
		dots:false,//显隐导行
		nav:true, //显示左右箭头
		loop:true,//循环轮播
		margin:10, //轮播项目之间的边距
		navText:['<span class="iconfont icon-xiangshang"></span>','<span class="iconfont icon-xiangshang"></span>'],//左右箭头内容
		autoplayHoverPause:true,//鼠标悬停停止自动播放
		responsive:{
		        0: {
                items: 1
            },
            450: {
                items: 1
            },
            768: {
                items: 2
            },
            1000: {
                items: 3
            },
            1200: {
                items: 3
            }
        }
	});