AlloyUI is a framework built on top of YUI3 that provides a simple API for building high scalable applications. A lot of people ask, why they should invest their time on AlloyUI? Or why not just use jQuery with their gigantic ecosystem of plugins?
The thing is, DOM manipulation is just the tip of the iceberg when you are talking about modern and highly scalable applications. You'll probably need another library for templating (like Mustache/Handlebars), another for modular loading (like RequireJS/HeadJS), another for MVC structuring (like Backbone/Ember), another for UI components (like jQueryUI/ExtJS) and so on.
Well, AlloyUI comes with all of those things together. So there's no mess between different libraries, just a uniform API that makes your life easier. It's mantained by highly qualified engineers of Liferay and it's built on top of YUI3, an awesome project made by Yahoo.
Demo:
AlloyUI SliderCheckout other handful and easy demos @
Examples | AlloyUI<style type="text/css">
.aui-carousel {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin: 20px 0;
}
.aui-carousel-item {
border-radius: 6px;
width: 700px;
height: 250px;
opacity: 0;
}
.aui-carousel li {
margin: 0 !important;
}
</style>
<div id="myCarousel">
<div class="aui-carousel-item" style="background: url(http://alloyui.com/carousel/img/1.jpg);"></div>
<div class="aui-carousel-item" style="background: url(http://alloyui.com/carousel/img/2.jpg);"></div>
<div class="aui-carousel-item" style="background: url(http://alloyui.com/carousel/img/3.jpg);"></div>
<div class="aui-carousel-item" style="background: url(http://alloyui.com/carousel/img/4.jpg);"></div>
</div>
<script src="http://cdn.alloyui.com/2.0.0pr3/aui/aui-min.js"></script>
<script type="text/javascript">
YUI().use(
"aui-carousel",
function(Y) {
new Y.Carousel(
{
activeIndex: "rand",
contentBox: "#myCarousel",
height: 250,
intervalTime: 2,
width: 700
}
).render();
}
);
</script>