AlloyUI Slider

Mick in Tutorials on Mar 15, 2013

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


<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(https://alloyui.com/carousel/img/1.jpg);"></div>
  <div class="aui-carousel-item" style="background: url(https://alloyui.com/carousel/img/2.jpg);"></div>
  <div class="aui-carousel-item" style="background: url(https://alloyui.com/carousel/img/3.jpg);"></div>
  <div class="aui-carousel-item" style="background: url(https://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>



Tagged with: AlloyUI slider carousel 


Mick

Mick G

idesignsmf.com

    

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.


17 Comments

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

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

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

Yup. Everything.
4

Like this on html block.


<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(https://alloyui.com/carousel/img/1.jpg);"></div>
  <div class="aui-carousel-item" style="background: url(https://alloyui.com/carousel/img/2.jpg);"></div>
  <div class="aui-carousel-item" style="background: url(https://alloyui.com/carousel/img/3.jpg);"></div>
  <div class="aui-carousel-item" style="background: url(https://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>
5

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

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

Yup.

Replace:

  margin: 20px 0;

With:

  margin: 0 auto;
7

Tried it but it showed a scroll bar?
8

Try making the image a bit smaller?
9

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

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

Here. Thanks Mick!


<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(https://joliepittonline.org/nivo-slider/sample1.jpg);"></div>
  <div class="aui-carousel-item" style="background: url(https://joliepittonline.org/nivo-slider/sample2.jpg);"></div>
  <div class="aui-carousel-item" style="background: url(https://joliepittonline.org/nivo-slider/sample3.jpg);"></div>
  <div class="aui-carousel-item" style="background: url(https://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>
12

Works fine for me.   Are you using SimplePortal?
13

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




Latest Discussions

Join the conversation



  Stay safe during this tough time!