未加星标

Lory Carousel Slider Features CSS Animation & Touch Support

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Out of all the carousel plugins online I have to tip my hat to Lory . It’s such a simple concept but it’s easily one of the most powerful sliders on the web.

The minified version totals about 7KB which isn’t small but certainly isn’t bad for a touch-enabled carousel slider .

Image Carousels in Web Design ― Benefits & Best Practices Image Carousels in Web Design ― Benefits & Best Practices

There's no shortage of carousel feature slideshows on the web. In fact, this trend has done nothing but… Read more

You can add this plugin to any website since it runs on jQuery or plain vanilla JS . It can run with no dependencies which is great for compatibility.

Lory is also one of the few plugins that doesn’t degrade in older browsers . It’s fully supported in IE10+ , and older versions can still run the slider, just without animations and little extras .

You’ll have to do all the programmatic coding yourself if you want to add content but it’s surprisingly simple . You can define how large to make each panel, how long to animate, and how to handle responsive browsers.

Check out the Lory homepage for source code and details about setup .


Lory Carousel Slider Features CSS Animation & Touch Support

Start by adding the Lory JS library to your site’s head section , either as a jQuery plugin or a vanilla library . All versions are currently hosted on the Cloudflare CDN , so it’s super easy to include a copy without any downloads.

With the javascript file installed you’ll want to create an HTML unordered list with the slide contents, but Lory comes with a few predefined classes so it’s good to stick with their model .

Here’s some sample code taken from the main Lory GitHub repo :

<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>

Now in jQuery (or plain JS), you can set up a function call . It should look something like this:

$('.js_slider').lory({
infinite: 1
});

Note the infinite option is just one of many features you can customize. And you can always change the .js_slider class to suit your needs.

While developing with this plugin you’re liable to have tons of customization questions. I would highly recommend browsing the documentation which is at the very bottom of the GitHub page .

Probably not the best location for docs but thankfully they’re pretty small. You only have about 10 options to customize and maybe 10-12 different events you can tinker with. This info can also be found at the bottom of the Lory website but it’s much easier to read on GitHub.

Updates aren’t as frequent but you can always pen an issue request on GitHub if you run into problems. If you really do have issues with the code you’ll probably have an easier time solving them on Stack Overflow .

Either way, you can get started pretty quickly using the Cloudflare CDN and the GitHub docs. And if you’re looking for a live demo with code check out this CodePen entry .

25 Free Slideshow Plugins for WordPress Best of 25 Free Slideshow Plugins for WordPress Best of

A slideshow, also known as a slider or a carousel, is a brilliant method to stack and display… Read more

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: CSSGitGitHubjQueryCDNJavaScriptHTMLJavaWord
分页:12
转载请注明
本文标题:Lory Carousel Slider Features CSS Animation &amp; Touch Support
本站链接:http://www.codesec.net/view/532358.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(67)