记录李洋博客主题模板更换Swiper幻灯片轮播的过程
温馨提示:这篇文章已超过1387天没有更新,请注意相关的内容是否还可用!
不知道从什么时候开始,有朋友开始反馈,360浏览器偶尔会出现点击轮播无效,或者需要双击才能跳转的问题,刚开始没在意,因为我测试没有任何问题,所以应该是浏览器的问题,但是后来偶尔间我还真遇到了,而且反馈的人也多了,所以就得重视这个问题,还是要感谢第一批反馈的朋友,虽然当时并没有重视,是因为轮播的js都是插件,第三方开发,不是自己写的,所以这个锅我不背。。。最近抽时间更新了5.0版本,找群里朋友测试了下,没有问题,主题会逐渐更新最新5.0版本。
为什么选择Swiper?
Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
好了,废话少说,简单记录下更换的过程。。。
首先,打开主题的header模板:
找到“<script src="{$host}zb_users/theme/{$theme}/script/swiper.min.js"></script>”
下载最新版的js(百度云盘)替换“swiper.min.js”,然后在这段代码下添加css
<link rel="stylesheet" rev="stylesheet" href="{$host}zb_users/theme/{$theme}/style/libs/swiper.min.css" type="text/css" media="all" />
然后对应路径上传刚刚下载的css样式文件。
附上百度云盘下载地址,其中包含js和css两个文件,直接下载上传到相应目录即可。
链接: https://pan.baidu.com/s/1JfC7CQTZdIu8VXjXKUSZKw
提取码: irk4
复制这段内容后打开百度网盘手机App,操作更方便哦
然后打开主题的“footer”模板,最下找到:
<script>var swiper = new Swiper('.swiper-home', {pagination:'.swiper-home-pagination',nextButton:'.swiper-home-button-next',prevButton:'.swiper-home-button-prev',paginationClickable:true,centeredSlides:true,autoplay:5000,autoplayDisableOnInteraction:false,lazyLoading:true,mousewheelControl:false,keyboardControl:true,loop:true});</script>
将其替换为:
<!-- Initialize Swiper --><script>var swiper=new Swiper('.swiper-container',{slidesPerView:1,spaceBetween:30,keyboard:true,loop:true,pagination:{el:'.swiper-pagination',clickable:true,},navigation:{nextEl:'.swiper-button-next',prevEl:'.swiper-button-prev',},autoplay:{delay:5000,disableOnInteraction:false,},});</script>
然后保存。
接下来找到index_cms和index_bolg模板,找到轮播代码框架:
<div class="site-main"> <div class="swiper-container swiper-home"> <div class="swiper-wrapper"> {module:slide} </div> <div class="swiper-pagination swiper-home-pagination"></div> <div class="swiper-button swiper-home-button-next swiper-button-next"><i class="fa fa-chevron-right"></i></div> <div class="swiper-button swiper-home-button-prev swiper-button-prev"><i class="fa fa-chevron-left"></i></div> </div> </div>
替换为:
<div class="swiper-container swiper-main"> <div class="swiper-wrapper"> {module:slide} </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div>
最后找到主题文件下的“slide.php”文件,找到
foreach ($array as $key => $reg) { $str .= "<article class='swiper-slide slide-single'><div class='swiper-image'><a href='".$reg->Url."' target='_blank'><img src='".$reg->Img."' alt='".$reg->Title."'></a></div></article>"; //$i++; }
替换成:
foreach ($array as $key => $reg) { $str .= '<div class="swiper-slide"><a href="'.$reg->Url.'" target="_blank"><img src="'.$reg->Img.'" alt="'.$reg->Title.'"></a></div>'; //$i++; }
OK,基本算是完成了。
然后回收网站后台,点击首页的“[清空缓存并重新编译模板]”,然后主题设置,轮播设置,右侧修改,点击一次,生成新的轮播框架,刷新前台查看效果(无效果记得强制刷新,windows快捷键:ctrl+f5)
好了,改造已经完成了,有人可能会问啊,看不懂怎么办?很简单,这是记录我更新的过程,不是详细的教程,毕竟不是谁都用“swiper”插件,主题我都已经更新了,也不需要您手动亲自操作,所以看懂看不懂的无所谓啦。
发表评论