jquery tools : Scroller issue

I was using scrollable plugin of jquery tools for a project.

The issue I was facing was when I make it circular by the following code, I used to have a an empty element right after the last element. This makes a weird transition on the scroller i.e it doesn’t look like it’s circular.

 $("#scrollable").scrollable({circular: true});

I came up with a quick fix since I didn’t have much time to spend on this.
I copied the second element of the list and appended at the last.
Couldn’t think of anything other than this. If you have a better solution feel free to comment.

$('.items').append('<li>'+$('.items li').eq(2).html()+'</li>')

Carousel using Dojo

For a project i had to make a carousel and i was using Dojo throughout my project. After about two weeks, i hav made one.

Sorry folks! The site is down for maintenance so i cant post the url here.

The URL that I gave below in one of my comments is now broken. It seems dojo has updated their dojo 1.4.0 to 1.4.3.

Go to this link : http://download.dojotoolkit.org

Choose the the latest release

Then go to  dojox/widget/ and find pager widget.

Final Output :

carousel using dojo

Here is da code :

html code :

<div id="carouselwrap">
<div id="carouselprev" class="traversecontrol"><img src="/img/blank.gif"/></div>
<!--image of the previous arrow-->
<div id="carousel"><!--start of the carousel-->
<div id="carouselscroll" ><!--start of the carouselscroll-->
<div class="carouselscrollbox"><!--start of the carouselscrollbox block-->
<div class="carouselscrollerimg">
           <img src="Your image here" /><!--this div contains the image path --></div>
<div class="soundsettitle bmrm_text">
            Lorem Ipsum</div>
<div class="artisttitle bmrm_text">
            Lorem Ipsum</div>
<div class="soundsetdesc bmrm_text">
           - Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</em><em><em><!--end of the carouselscrollbox block--></em></em></div>
<div id="carouselnext" class="traversecontrol"><img src="/img/blank.gif"/></div>
<!--image of the next arrow--></div>
<!--repeat the div block wid class 'carouselscrollbox'(in a for loop) as many times to get as many records in da carousel.-->

Javascript code: First step : dojo.require("dojo.fx");

var animationMethod = "chain";
var animG, offsetW, offsetH = null;
var newLeft = 0;
var boxMixin = {duration: 1000};
var carouselscroller ;

//attach events on load
dojo.addOnLoad(function() {
       var prev = dojo.byId('carouselprev');
       var next = dojo.byId('carouselnext');
       carouselscroller = dojo.byId('carouselscroll');

//sliding to the right
function slideRight() {
       var difference = dojo.byId('carousel').offsetWidth-dojo.byId('carouselscroll').offsetWidth;
           newLeft = newLeft - 200;
           var style = carouselscroller.style;
	   var anim1 = dojo.animateProperty({
	   node: carouselscroller,
	   duration: boxMixin.duration/2,
	   properties: {
		left: { end: newLeft, unit:"px" }

	animG = dojo.fx[animationMethod]([anim1]).play();


//sliding to the left
function slideLeft() {
   	    newLeft = newLeft + 200;
	    var style = carouselscroller.style;
	    var anim1 = dojo.animateProperty({
	    node: carouselscroller,
	    duration: boxMixin.duration/2,
	    properties: {
		//width: { /* start: boxMixin.startWidth, */ end: boxMixin.endWidth, unit:"px" },
		left: { end: newLeft, unit:"px" }

   animG = dojo.fx[animationMethod]([anim1]).play();

CSS Code:

/*soundsets traversal [carousel]*/
#carouselwrap{width:700px;margin:35px 0px}
width: 600px;
height: 230px;
overflow: hidden;
width:2000px !important;
#carouselprev{background:url('/*image left arrow*/') no-repeat;}
#carouselnext{background:url('/*image right arrow*/') no-repeat;}
.traversecontrol{float:left;width:40px;height:45px;margin:70px 0px}
	border:1px solid #eee;

.carouselscrollerimg img{width:140px;height:80px;margin:3px 1px }

U can change the css accordingly.This is just my way of doing it.