Owl Carousel是非常强大的jQuery焦点图插件,这个焦点图插件功能众多,高度可定制性,支持触摸设备,并且是响应式的。
引入必要的js文件和css文件
<!-- Important Owl stylesheet --> < link rel = "stylesheet" href = "owl-carousel/owl.carousel.css" > <!-- Default Theme --> < link rel = "stylesheet" href = "owl-carousel/owl.theme.css" > <!-- jQuery 1.7+ --> < script src = "jquery-1.9.1.min.js" ></ script > <!-- Include js plugin --> < script src = "assets/owl-carousel/owl.carousel.js" ></ script > |
HTML结构
使用Owl Carousel焦点图插件只需要创建一个div
,给它一个特定的classowl-carousel
既可。
< div id = "owl-example" class = "owl-carousel" > < div > Your Content </ div > < div > Your Content </ div > < div > Your Content </ div > < div > Your Content </ div > < div > Your Content </ div > < div > Your Content </ div > < div > Your Content </ div > ... </ div > |