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 Slider

Checkout other handful and easy demos @ Examples | AlloyUI

Code Select Expand

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

Code Select Expand

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

Code Select Expand

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

Can I use this on a portal Mick? I've been struggling with installing Nivo Slider and it's not showing up the images even if I have the correct paths. I might have a better luck with this.

Can I use this on a portal Mick? I've been struggling with installing Nivo Slider and it's not showing up the images even if I have the correct paths. I might have a better luck with this.

Absolutely. Use an HTML block for this and add all the code in it. Just create your own images and you're done.

Yay! Thanks Mick! Will try it out as soon as I'm done feeding my puppies. LOL!

PS: So I'll put all the codes including the CSS codes?

Yup. Everything.

Like this on html block.

Code Select Expand

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

Working just fine Mick! Thank you. Is there a code I could add to center it?

Working just fine Mick! Thank you. Is there a code I could add to center it?

Yup.

Replace:

Code Select Expand

  margin: 20px 0;

With:

Code Select Expand

  margin: 0 auto;

Tried it but it showed a scroll bar?

Try making the image a bit smaller?

I did. The images I tried were a bit smaller than 700x250. The images were 618x246.

I did. The images I tried were a bit smaller than 700x250. The images were 618x246.

Post your complete code so i can test it.

Here. Thanks Mick!

Code Select Expand

<style type="text/css">
.aui-carousel {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin: 0 auto;
}

.aui-carousel-item {
  border-radius: 5px;
  width: 618px;
  height: 246px;
  opacity: 0;
}

.aui-carousel li {
  margin: 0 !important;
}
</style>

<div id="myCarousel">
  <div class="aui-carousel-item" style="background: url(http://joliepittonline.org/nivo-slider/sample1.jpg);"></div>
  <div class="aui-carousel-item" style="background: url(http://joliepittonline.org/nivo-slider/sample2.jpg);"></div>
  <div class="aui-carousel-item" style="background: url(http://joliepittonline.org/nivo-slider/sample3.jpg);"></div>
  <div class="aui-carousel-item" style="background: url(http://joliepittonline.org/nivo-slider/sample4.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: 226,
        intervalTime: 2,
        width: 618
      }
    ).render();
  }
);
</script>

Works fine for me.   Are you using SimplePortal?

I am. I tried the original code and it is working fine. Maybe I should stick on the actual dimensions.  :grin: