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/

Lory Carousel滑块具有CSS动画和触摸支持相关推荐

ie css动画,ie不支持css3动画吗
IE9及以下版本不支持css3动画:CSS3动画对低版本的浏览器的支持效果并不是很好,特别是IE9及以下版本,更是无法支持:而css3动画就是指使元素从一种样式逐渐变化为另一种样式的效果. 本教程操作 ...
html如何自定义一个动画效果,30个纯css动画代码片段和效果演示
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
【译】CSS动画 vs JS动画
原文地址目前有两个主流的方法在web上创建动画:使用CSS或JS.到底选择哪种方法来实现动画,完全取决于你的项目以及你想要达到的效果. tips: 对于简单的只出现一次的过渡效果,可以采用CSS动画 ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
前端技术周刊 2019-01-07：CSS 动画
2019-01-07 前端快爆 Chrome 72 已经进入了 beta 阶段.新增:公有类成员的声明和初始化.一些 DevTools 新功能(可视化性能指标.高亮 text nodes.复制节点的 ...
超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
动画延迟效果css,每个子元素都有延迟的CSS动画
每个子元素都有延迟的CSS动画我试图通过将动画应用于每个子元素来创建级联效果. 我想知道是否有比这更好的方法: .myClass img:nth-child(1){ -webkit-animatio ...

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

Lory Carousel滑块具有CSS动画和触摸支持相关推荐

最新文章

热门文章