AlloyUI Slider

in Tutorials on 15 Mar 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(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>



idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com 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.

idesignSMF.com | SimpleMachines.org



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
Quote from: JoliePittOnline on 16 Mar 2013
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
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(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>
#5
Working just fine Mick! Thank you. Is there a code I could add to center it?
#6
Quote from: JoliePittOnline on 17 Mar 2013
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
Quote from: JoliePittOnline on 17 Mar 2013
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(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>
#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

local_fire_department You might also like


rocket_launch

Free Forever. Our themes will always be free. Forever. Period.