JSFiddle - React, Tailwind, and code Playground

by ecropolis

HTML

<div class="carousel" id="container">
  <ol>
    <li><img src="img/c1.jpg"></li>
    <li><img src="img/c2.jpg"></li>
    <li><img src="img/c3.jpg"></li>
    <li><img src="img/c4.jpg"></li>
    <li><img src="img/c5.jpg"></li>
    </ol>
</div>

CSS

.YUI 3-carousel-button {
  background: url("sprite_button.png") no-repeat scroll 0 0 transparent !important;
  height: 20px !important; width: 28px !important;
}
.YUI 3-carousel-nav-item {
  background: url("sprite_button.png") no-repeat scroll 0 0 transparent !important;
  background-position: -133px 0 !important;
}
.YUI 3-carousel-first-button {
  background-position: -90px 0 !important;
  margin-right: 35px !important;
}
.YUI 3-carousel-first-button-disabled {
  background-position: -60px 0 !important;
  margin-right: 35px !important;
}
.YUI 3-carousel-next-button {
  background-position: -30px 0 !important;
}
.YUI 3-carousel-button-disabled {
  background-position: 0 0 !important;
}
.YUI 3-carousel-nav-item-selected {
  background-position: -121px 0 !important;
}

JavaScript

YUI({gallery: 'gallery-2010.10.20-19-33'})
 .use("gallery-carousel", "gallery-carousel-anim", "substitute", function(Y) {
  var carousel = new Y.Carousel({ boundingBox: "#container",
   contentBox: "#container > ol" });
  carousel.plug(Y.CarouselAnimPlugin,{animation:{speed: 0.7}});
  carousel.render();
});