wordpress 轮播图

MetaSlider-最好的幻灯片轮播插件设置图文教程

对于大家喜欢用WordPress建站的站长,一般都喜欢加一个幻灯片的轮播效果在首页或者其他地方,这样显得页面更加丰满。包括虾皮路也不例外。很多人经常问WordPress建站的话,那最好的幻灯片轮播插件是哪个?其中答案很容易,就是MetaSlider。 MetaSlider 简单易用,上手极快。 MetaSlider 虽然是英文版的,但是也不影响太多,不过还是很多人对其比较懵。下面虾皮路就给大家介绍一下MetaSlider-最好的幻灯片轮播插件设置图文教程。

1、下载 MetaSlider 插件

这里不用虾皮路教了吧,直接在WordPress后台搜索 MetaSlider 插件进行安装后启用即可。

MetaSlider 插件启用后,在WordPress后台就可以找到相应的设置选择,进入后,各类功能界面如下图,首先会在页面显示如下图,新增一个幻灯片。

MetaSlider 插件的设置项主要用到如下几个功能,分别是:

1、添加幻灯片

2、效果预览

3、保存设置

其他功能基本没过用,这里不必去理会

2、添加幻灯片 3、选择幻灯片图片

在这类我们只要选择媒体库里对应想要展示的幻灯片图片即可。

4、完善幻灯片信息

添加完幻灯片后,这里我们需要针对里面的信息进行编辑,如下图顺序。增加几张幻灯片只要重复以上操作即可。并且操作非常友好,可以直接拖动幻灯片编辑栏调换顺序。

5、选择模板

编辑好幻灯片信息后,我们可以点击右边栏的图片进行幻灯片主题样式的选择。

在里面我们可以看到有不少模板,这里我们只要选择其中一个就行了。并且在决定应用前还可以预览。

6、点击保存设置

幻灯片及各类信息等都设置好后,可以点击保存设置。

7、嵌入代码

将以下代码复制,放进自己的主题的响应页面中,比如放到首页对应的位置即可。

当然, MetaSlider 插件也支持文章页的幻灯片插入,这样可以使得文章页内部也出现相应的幻灯片模式。

更多图文教程请关注虾皮路或搜索虾皮路。

Axure教程:使用动态面板实现轮播图

笔者在本文中介绍了如何用Axure动态面板实现轮播图效果的操作步骤,与大家分享。

所需元件

一个转换为动态面板的矩形并命名为轮播图:

这里要记得把“自动调整为内容尺寸”勾选取消掉,方便后面调整图片大小。

三张图片并给图片编号1、2、3:

三个椭圆并给椭圆对应编号1,2,3:

操作步骤

(1)建立三个面板并分别命名为“图1”、“图2”、“图3”

(2)将三张图分别放到三个面板下

(3)为动态面板设置第一个交互动作——载入时,使其自动轮播。

(4)看看效果

到这一步我们已经实现了轮播图的自动轮播,但是椭圆元件还只是摆设作用,接下来让我们为椭圆也加入交互。

(5)将三个椭圆放到一个选项组内

按住Ctrl键并用鼠标分别点击三个椭圆,在“设置选项组名称”里填入group。

这里选项组的作用是保证这三个椭圆当有一个是选中状态时,其他两个都将是非选中状态。

(6)为每个椭圆设置相应的交互动作——鼠标单击时,以及交互样式——选中

1)椭圆1:

交互动作:

这里需要注意,因为图1在最左边,所以“进入动画”是“向右滑动”。

交互样式:

2)椭圆3:

交互动作:

图3在最右边,所以“进入动画”是“向左滑动”。

交互样式:

与椭圆1相同。

3)椭圆2:

交互动作:

因为椭圆2处于中间,所以我们需要增加判断条件:

最终椭圆2的交互动作为:

交互样式:

与椭圆1相同。

4)动态面板:

我们再为动态面板交互动作——载入时,增加一个椭圆1状态为选中。

(7)再看看效果:

(8)当我们点击了椭圆时,会发现轮播图的自动轮播效果没了,如果想要实现点击椭圆后轮播图继续轮播只需要再在每个椭圆的交互动作后面增加动作:

到这里我们的轮播图就完成啦!?( ‘ω’ )? get!

小记

(1)这里我们用到了动态面板的又一种用途——轮播图。如果想知道动态面板的另一种用途——密码可见性切换,可以看我的另一篇文章:

(2)轮播图实现起来不难,但是主要考验我们对于项目中每个元件的命名的严谨准确,否则很容易就会把椭圆对应的图片弄混,比如点击第一个椭圆却跳到了第三张图…这个项目还只是一个案例,里面的元件非常少,只有十个不到。

然而当我们制作一个较大的原型时,项目里面的元件少说也有上百个,当你从一开始没有养成给每个元件命好名的习惯的话,后面再去梳理将会是一件非常麻烦的事情,也不便于后面查看你的项目的人的查阅。血的教训o(╯□╰)o,所以切记从一开始就为每个添加的元件命好名!

本文由 @Nilz 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash ,基于 CC0 协议

wordpress如何制作小程序,设置激励视频阅读,流量主收益猛增

人之所以需要理想,犹如水手之需要星星,星星虽不可即,但可指引我们的航程”继星茫的升级开源学习UI,星尘,让我们再简单点,让我们再成熟点!

小程序说明

星尘是基于微慕插件和开源小程序的定制化主题,简单的说就是uni星茫太多bug了最后做了二开了原生的小程序 ,枫瑞博客网作者写的第二款开源小程序UI

小程序特色

在首页用轮播方式显示置顶文章

显示文章内容页,包括文章站内链接跳转,站外链接复制到剪切板,显示猜你喜欢的相关文章

显示文章评论,提交评论和回复评论,加载评论分页,显示微信用户评论者的头像

文章微信用户点赞及点赞的微信用户头像显示

通过微信支付对文章赞赏

文章激励视频阅读体验预览视频预览因为没有时间没有及时提交审核

预览视频

可访问:

视频教程可访问:

其他说明教程

V1.0 配置说明:

V1.1配置说明:

源码下载地址

v1.1:开发版:链接: 提取码: 734g

v1.0:体验版:链接: 提取码: sw66

如有有问题可以直接访问枫瑞大佬博客,或者直接留言