Click here for $50 off!
Click here for $50 off!

Author Topic: [Tip/Trick]  AlloyUI Photo Carousel Slider Block  (Read 12927 times)


0 Members and 1 Guest are viewing this topic.

June 26, 2014, 06:44:57 PM

Offline Brian

  • Administrator
  • Jr. Member
  • *
  • Posts: 49
  • Country: us
  • Karma: 0
    • View Profile
[Tip/Trick] AlloyUI Photo Carousel Slider Block
« on: June 26, 2014, 06:44:57 PM »

(Register to disable this ad!)
"ns"

AlloyUI is a framework built on top of YUI3 that provides a simple API for building high scale-able 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 scale-able 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.


Here's an example of using the AlloyUI image slider in a Simple Portal HTML block:

Code: [Select]
<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>

Checkout other handful and easy demos @ Examples | AlloyUI

This is an i360Design.com archive post, which closed down June 1st. All credit and appreciation to Mick.
« Last Edit: June 30, 2014, 10:00:05 PM by Brian »

Click here for $50 off!
Click here for $50 off!
 

HostGator
Use SMFHELP25OFF for 25% off!