Cute主题使用幻灯片详解
由于本站使用的是Cute主题，故而没事的时候也会详细了解一下该wordpress主题；今天做单页的时候想用幻灯片，又不想再增加其它代码，于是就查看了下该主题使用的幻灯片插件，想着直接用就可以了；
详细查看HTML代码发现使用的是【jQuery幻灯片插件OWL Carousel】稍微说下该插件：Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件，它具有一下特点：
- 兼容所有浏览器
- 支持响应式
- 支持 CSS3 过度
- 支持触摸事件
- 支持 JSON 及自定义 JSON 格式
- 支持进度条
- 支持自定义事件
- 支持延迟加载
- 支持自适应高度
- 。。。。。。
Owl Carousel 提供了众多的参数、回调函数及自定义事件（具体请往下浏览），所以它几乎可以满足你的所有要求。并且兼容所有浏览器，包括 IE6、IE7。
说来还是不错的插件，好了，进入正题吧，我直接贴上代码：
|
1 2 3 4 5 6 7 8 9 10 11 |
<section class="nt-slider slider-big owl-carousel"><!--此处的CSS 还可以是 slider-big max_big slider-min --> <div class="item" style="background-image:url('http://blog.21863.cn/wp-content/uploads/2018/08/07/banner1.jpg')"> <div class="content"><h2 class="title">中泽物联官方</h2></div> </div> <div class="item" style="background-image:url('http://blog.21863.cn/wp-content/uploads/2018/07/28/plat_p1.png')"> <div class="content"><h2 class="title">物联卡官方网站</h2></div> </div> <div class="item" style="background-image:url('http://blog.21863.cn/wp-content/uploads/2018/08/07/banner1.jpg')"> <div class="content"><h2 class="title">电信物联卡公司</h2></div> </div> </section> |
对应的JS是，直接拷贝的首页的，相对应的参数可以自行查询，这里不做阐述：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> $('.nt-slider').owlCarousel({ items: 1, loop: true, nav: true, smartSpeed: 1200, autoplay: true, autoplayTimeout: 5000, autoplayHoverPause: true, navText: ['<i class="tico tico-angle-double-left"></i>', '<i class="tico tico-angle-double-right"></i>'], responsive: { 0: { nav: false, }, 992: { nav: true, } } }); </script> |
看看你新添加的页面幻灯片是不是已经正常了！可能对于Cute主题使用幻灯片并没有说太清楚，但是页面上加上这两个基本没问题了！
除特别注明外，本站所有文章均为电信物联卡官网原创，转载请注明出处来自https://blog.21863.cn/post/760.html
