在网页设计中,图像滑块和英雄图像的使用已经无处不在。 如果您想到了三个最喜欢的网站,则可能至少有一个网站的首页和中心位置设有大图片滑块。
在WordPress中将这些滑块之一添加到自己的网站时,您有几种选择。 让我们看一下图像滑块中可能需要的内容以及可用的解决方案。
您在WordPress图像滑块中需要什么?
图像滑块的早期紧贴其名称-老式的幻灯片放映-每张幻灯片上只有一张图像。 随着时间的流逝,这些图像滑块变得越来越复杂-一些插件解决方案提供了他们自己的成熟的可视化编辑器。
在我们看一下存在什么解决方案之前,这里有一些问题可以帮助您弄清您的项目需要什么:
- 您的滑条是否只需要支持图像? 还是也需要视频?
- 您希望分层在滑块上有多复杂? 只是一张图片,一张上面有文字的图片,还是拼凑在一起的几层来制作每张幻灯片?
- 您是否需要将动态内容集成到滑块中?
- 您可以花多少时间维护和更新滑块中的内容?
- 您在编写自己的解决方案时感觉如何?
- 您要考虑什么价格范围?
一旦您有了针对这些问题的快速解答,让我们继续进行现有的解决方案。
免费的WordPress图像滑块插件
我们的第一轮图像滑块选项由免费插件组成。 如果您正在寻找一种便宜且易于使用的解决方案,那么这些将非常适合您。 免费插件的功能集通常比高级插件要小,因此,如果您的站点需要更复杂的功能,则它们可能不是最佳选择。
以下是有关WordPress的免费图像滑块插件的一些顶级竞争者:
WP 1滑块
这个简单的滑块响应灵敏,可以通过简码或小部件插入您的网站。 WP 1 Slider的免费版本支持无限数量的图像,以及覆盖文本和图像的功能。 但是,如果您要添加视频,则WP 1仅在高级版本中可用。
MotoPress的响应式滑块
响应式滑块是最可定制的免费图像滑块之一,可通过拖放编辑器将复杂的幻灯片放在一起。 免费版本可以处理图像,视频和文本。 与其他免费选项不同的功能之一是能够处理滑块内的post和WooCommerce对象,并具有动态更新滑块的功能。
![MotoPress的响应式滑块](https://i-blog.csdnimg.cn/blog_migrate/cfeba196d34ebed6f402b2e143ddb2d4.png)
Soliloquy的滑块
另一个出色的图像滑块插件Slider享有很高的声誉。 在WordPress插件存储库上,目前有600多个五星级评论和80,000个活动安装。 像此列表中的大多数插件一样,Slider可让您轻松显示图像,文本和按钮。 它还具有拖放编辑器,该编辑器带有多个模板,因此您可以快速使滑块看起来不错。
![Soliloquy的滑块](https://i-blog.csdnimg.cn/blog_migrate/3174ab2b9b00310bf021c14b8f015b8a.png)
付费WordPress图像滑块插件
我们介绍的免费滑块很坚固,但很简单。 如果您正在寻找更广泛的功能集,这里有一些付费的图像滑块,包括所有功能。 这些插件中的每一个都带有成千上万的五星级评论,插件支持以及可自负盈亏的各种功能。
Slider Revolution响应式WordPress插件
Slider Revolution是WordPress的第一大销售滑块插件,这有充分的理由。 它涵盖了您期望的所有基本知识,使您可以快速轻松地构建图像滑块。 但是,它真正出色的地方在于其一流的视觉编辑器。 该野兽具有许多其他插件没有的功能。
![滑块革命](https://i-blog.csdnimg.cn/blog_migrate/111e1eee03cd62ee76bc2f2e7b9d6449.png)
模板库适用于希望减少编码量的人们。 立即拥有数十种外观和设计,您可以以最小的努力获得完美的滑块设置。 在其可用模板之上,Slider Revolution还具有一个对象库,使您不仅可以将图像拖放到滑块中。 它的功能包括处理视频,媒体库,社交供稿等。
在演示方面,用户还可以使用许多动画,其中包括模仿在线观看的流行白板视频的动画。 最后,功能强大的用户管理员可让您访问更精细的控件。 其中一些功能包括滑动加载顺序,使用延迟加载以及更多有助于保持滑块快速加载的选项。
LayerSlider响应式WordPress滑块插件
另一个很棒的付费图像滑块, LayerSlider插件几乎可以满足您的所有需求。 它的视觉编辑器易于使用,提供了多种模板,可让您在创建自己的图像滑块时快速入门。 虽然支持的对象类型少于其他付费滑块,但它提供了一个丰富的动画库,可以创建一些令人惊叹的布局。
![LayerSlider插件](https://i-blog.csdnimg.cn/blog_migrate/ee24876079a6b275cb2a1589ad48ed31.png)
在WordPress中构建自己的图像滑块
我们已经看过WordPress的一些惊人的图像滑块,但是如果您需要更多的自定义,独特功能或性能保证,该怎么办? 那就是建立自己的滑块的地方。
创建高性能图像滑块
在性能方面,包括额外JavaScript库或过多JavaScript确实会减慢您的网站速度。 如果您要创建一个占位面积较小的图像滑块,但又不要太花哨,那么HTML5和CSS3可能是一个不错的起点。
完整HTML和CSS滑块的基本思想是在屏幕外加载幻灯片,然后使用CSS动画关键帧创建旋转效果。 对于特定的代码,此Stack Overflow线程上有一些很棒的示例。
对于希望通过使用几乎没有JavaScript或没有JavaScript的滑块来获得性能提升的人们,还有许多基于HTML5的图像滑块可用。
构建用于互动和体验的图像滑块
基于HTML5的图像滑块看起来不错,但是其功能有所限制。 对于正在寻找要添加到其WordPress网站的许多功能的人们,使用流行JavaScript库是行之有效的方法。
jQuery是最流行的方法之一,它具有多种功能,可在短短几分钟内轻松将滑块的骨架抬起。
您如何创建图像滑块?
我们已经介绍了一些为WordPress网站创建图像滑块的最佳方法,但是还有更多的方法。 如何将图像滑块添加到自己的网站? 有没有您喜欢的插件或库? 在下面的评论中让我们知道!
翻译自: https://code.tutsplus.com/articles/best-ways-to-create-an-image-slider-for-wordpress--cms-32735