记录李洋博客主题模板更换Swiper幻灯片轮播的过程

不知道从什么时候开始，有朋友开始反馈，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”插件，主题我都已经更新了，也不需要您手动亲自操作，所以看懂看不懂的无所谓啦。