正文 首页新鲜科技

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

李洋博客

不知道从什么时候开始,有朋友开始反馈,360浏览器偶尔会出现点击轮播无效,或者需要双击才能跳转的问题,刚开始没在意,因为我测试没有任何问题,所以应该是浏览器的问题,但是后来偶尔间我还真遇到了,而且反馈的人也多了,所以就得重视这个问题,还是要感谢第一批反馈的朋友,虽然当时并没有重视,是因为轮播的js都是插件,第三方开发,不是自己写的,所以这个锅我不背。。。最近抽时间更新了5.0版本,找群里朋友测试了下,没有问题,主题会逐渐更新最新5.0版本。

为什么?.jpg

为什么选择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

image.png

好了,改造已经完成了,有人可能会问啊,看不懂怎么办?很简单,这是记录我更新的过程,不是详细的教程,毕竟不是谁都用“swiper”插件,主题我都已经更新了,也不需要您手动亲自操作,所以看懂看不懂的无所谓啦。