在所有在线轮播插件中,我不得不向Lory致敬 。 这个概念很简单,但却很容易成为网络上功能最强大的滑块之一。
您可以将此插件添加到任何网站,因为它可以在jQuery或纯香草JS上运行 。 它可以在没有依赖项的情况下运行,这对兼容性非常有用。
劳瑞(Lory)也是少数在老版本浏览器中不会降级的插件之一。 IE10 +完全支持它,并且较旧的版本仍可以运行滑块, 而无需动画和少量附加功能 。
如果要添加内容,则必须自己进行所有编程编码,但这非常简单 。 您可以定义制作每个面板的大小,制作动画的时间以及如何处理响应式浏览器。
请查看Lory主页以获取源代码和有关setup的详细信息 。
![轮播萝莉预览](https://i-blog.csdnimg.cn/blog_migrate/49e931f900698a46bf73a0f803b24662.png)
首先,将Lory JS库作为jQuery插件或vanilla库添加到您网站的head
。 所有版本当前都托管在Cloudflare CDN上 ,因此包括一份无需任何下载的副本非常容易。
安装了JavaScript文件后,您需要创建一个包含幻灯片内容HTML无序列表,但是Lory 带有一些预定义的类,因此最好坚持使用它们的模型 。
这是从Lory GitHub主仓库中获取的一些示例代码 :
<div class="slider js_slider">
<div class="frame js_frame">
<ul class="slides js_slides">
<li class="js_slide">1</li>
<li class="js_slide">2</li>
<li class="js_slide">3</li>
<li class="js_slide">4</li>
<li class="js_slide">5</li>
<li class="js_slide">6</li>
</ul>
</div>
</div>
现在,在jQuery(或纯JS)中,您可以设置一个函数调用 。 它看起来应该像这样:
$('.js_slider').lory({
infinite: 1
});
请注意, infinite
选项只是您可以自定义的众多功能之一。 而且,您随时可以更改.js_slider
类以适合您的需求。
使用此插件进行开发时,您可能会遇到大量自定义问题。 我强烈建议浏览 GitHub页面底部的文档 。
可能不是文档的最佳位置,但幸运的是它们很小。 您只有大约10个选项可以自定义,也许可以修改10-12个不同的事件 。 该信息也可以在Lory网站的底部找到,但是在GitHub上阅读起来要容易得多。
更新不是那么频繁,但是如果遇到问题,您总是可以在GitHub上发布问题请求 。 如果您确实有代码问题,则可以在Stack Overflow上轻松解决它们。
无论哪种方式,您都可以使用Cloudflare CDN和GitHub文档快速入门 。 如果您正在寻找带代码的现场演示,请查看此CodePen条目 。