Lory Carousel滑块具有CSS动画和触摸支持

在所有在线轮播插件中，我不得不向Lory致敬 。 这个概念很简单，但却很容易成为网络上功能最强大的滑块之一。

您可以将此插件添加到任何网站，因为它可以在jQuery或纯香草JS上运行 。 它可以在没有依赖项的情况下运行，这对兼容性非常有用。

劳瑞（Lory）也是少数在老版本浏览器中不会降级的插件之一。 IE10 +完全支持它，并且较旧的版本仍可以运行滑块， 而无需动画和少量附加功能 。

如果要添加内容，则必须自己进行所有编程编码，但这非常简单 。 您可以定义制作每个面板的大小，制作动画的时间以及如何处理响应式浏览器。

请查看Lory主页以获取源代码和有关setup的详细信息 。

首先，将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条目 。

翻译自: https://www.hongkiat.com/blog/lory/