使用Metafizzy’s Flickity来制作内容触摸滚动

flickity是一个JavaScript库的滑块,metafizzy成名的戴维desandro建。这是优化的触摸手势,性能,包括基于物理的动画。在本教程中,我们将得到它,并运行,然后检查一些额外的功能,它带来的表。让我们走吧!

任务
让我们想象一下,我们被一个虚构的网络学习公司,在他们的网站上执行一个滑块。目前,他们只在主页上有三个流行的课程,但他们想添加更多的列表,并已经决定,一个滑块听起来像一个伟大的解决方案。

Current State only 3 featured courses shown

模拟流行的滚动效果

步骤1:获得设置
建立flickity很简单。下载flickity.pkgd.min.js以及flickity.min.css,保存在相应的文件夹在您的项目目录,这些文件和链接,都在文档的<head>标签。我喜欢,但是,它们连接通过CDN加速性能,如下。


步骤2:开始行动!
flickity可以三种方式初始化。首先,我们可以使用jQuery。我们会链接到jQuery,然后,在< >标签运行脚本:

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/259209.html

(0)
上一篇 2022年5月21日
下一篇 2022年5月21日

相关推荐

发表回复

登录后才能评论