在FrontOpen主题中添加轮播并完美自适应的方法

FrontOpen主题的最大特点是自适应，技术层面完美适应各种分辨率…..

真要在各种分辨率下都好看，就要看使用者建站的时候怎么想了.

接下来介绍下，怎么添加完美自适应本款主题的首页幻灯片,幻灯片采用插件，meta slider .

1. 安装和设置插件。 安装后，后台工具栏会出现 meta slider 。

新的滑块就是创建一组幻灯片，然后添加幻灯片…

宽度和高度根据你自己的想要展示的图片比例填，我测试设的是宽1800，高600。 （3：1）

具体的宽和高要设置都大，要看你想要兼容适应的分辨率，如果你要适应 3840的宽度，那最好就设这么宽。

2.  添加到主题代码中。

在meta slider 的一组幻灯片，右下角 有“用法”，如下图：

复制这段文字，打开 frontopen2主题下的index.php, 在<div class=”main”> 后面加入上面复制的代码：

is_home()是只在首页展示，在幻灯片短代码 前后加了 “<div class=’slide_box’>”. 这个是自适应的关键。

3. 修改样式文件

在 style.css 的第一个  .post_box 样式行后面回车 中加入一行样式 .

.slide_box{margin-right:4%;overflow:hidden;width:96%;}

如图：

在mobile.css 中的 .post_box 后面 回车 加入一行样式.

.slide_box{margin-right:0;overflow:hidden;width:100%;}

如图：

保存后，大功告成。去试试效果吧！

补充一个问题：为什么看yoyo168.com是双栏，看自己的是单栏显示？

因为我修改了显示双栏的最小分辨率，主题默认是1366以上才显示双栏，以下以单栏呈现。

在style.css 中搜索  1366px（这个是主题的默认值） ， 改成你想要双栏显示的最小分辨率的宽度就行了。

比如我的事 改成了 @media screen and (min-width:1280px){