Carousel

[mikewgd]

Hello,

Im trying to create a raw javascript carousel using no libraries at all. And Im having some trouble with the animation. I cant seem to make it move to the left only when clicked. However it keeps moving when i click it once. I currently commented the animation part out, but can anyone help me?

Ide like it to behave like a normal carousel. When you click on the next button the thumbs move to the left. Heres the link: http://mikewgd.com/wp-content/portfo.../carousel.html

[JunkMale]

You may get an answer if you posted your code here wrapped in the appropriate forum tags for HTML or CODE or PHP which helps separate code from question and generally helps people as links are not often followed for obvious reasons.

[mikewgd]

Ok, here you go:

<style type="text/css">
div#animals.carousel li img {width:266px;}
div#animals.carousel li {overflow:hidden; height:175px;}
div.carousel {position:relative;overflow:auto;}
div.carousel a.pag {text-decoration:none;color:#999;font-size:50px;font-weight:bold; background:#f5f5f5;padding:14px;top:50%;border:1px solid #ccc;line-height:160px;float:left;}
div.carousel a.pag.prev {left:0;}
div.carousel a.pag.nxt {right:0;}
div.carousel .viewer {overflow:hidden;float:left;width:538px; padding:6px; background:#CCC; border:1px solid #666; margin:0 10px 0 10px;}
div.carousel .viewer ul {padding:0;margin:0; overflow:auto;}
div.carousel .viewer ul li {list-style-type:none; float:left;margin-right:6px;}
div.carousel .viewer .holder {position:relative;}
</style>
    <div class="carousel" id="animals">
    	<a href="#" class="pag prev"><</a>
        <div class="viewer">
    		<div class="holder" style="width:10000px;">
                <ul>
                    <li><a href="#"><img src="images/other/giraffe.jpg" /></a></li>
                    <li><a href="#"><img src="images/other/eagle.jpg" /></a></li>
                    <li><a href="#"><img src="images/other/elephant.jpg" /></a></li>

                    <li><a href="#"><img src="images/other/lion.jpg" /></a></li>
                    <li><a href="#"><img src="images/other/tiger.jpg" /></a></li>
                    <li><a href="#"><img src="images/other/wolf.jpg" /></a></li>
                </ul>
            </div>
        </div>
        <a href="#" class="pag nxt">></a>
    </div>

var ML = {};
addLoadEvent(function() {
    ML.Carousel.init();
})

ML.Carousel = {
	
	thumbCount : 1,
	thumbWidth : 266 + 6, // width of <li> + margin-right (6)
	count : 0,
	timer : null,
	
	init : function() {
		var div = document.getElementsByTagName('div');
		
		for (var i=0; i<div.length; i++) {
			if(div[i].className.match(/carousel*/ig)) {
				ML.Carousel.setup(div[i]);	
			}
		}
	},
	
	setup : function(carousel) {
		cleanWhitespace(carousel);
		
		var prevButton = carousel.firstChild,
			nextButton = carousel.lastChild,
			viewer = carousel.childNodes[1],
			holder = viewer.firstChild,
			ul = holder.firstChild;
		
		holder.style.width = ((this.thumbWidth) * ul.childNodes.length) + 'px';
		holder.style.left = 0;
		viewer.style.width = ((this.thumbWidth) * this.thumbCount)-6 + 'px'; //have to get rid of the margin-right 
		
		prevButton.onclick = function() {
			return false;
		}
		nextButton.onclick = function() {
			ML.Carousel.next(holder, ul.childNodes.length);
			return false;
		}
	},

	prev : function (slide, thumbLength) {
		
	},
	
	next : function (slide, thumbLength) {
		this.count++;
		
		if(this.count == thumbLength) {
			this.count = 0;	
		}
		
		//this.timer = setTimeout(function() {ML.Carousel.next(slide, thumbLength);},20); // call moveRight in 20msec
		slide.style.left = (-(this.thumbWidth*this.count))+'px';
		//clearTimeout(animate);
	}
		
}

[mikewgd]

Anyone?

[Fairview]

See,
Manual Horizontal Scrolling Galleries

[mikewgd]

Yea, I looked at that one. Its all minified and kind of erm... sloppy done and too many aspects. Im just trying to figure out how to :

1. Click on a link
2. Have it move to the left (lets say -272px)
3. Then STOP
4. Click on the link again, and move from current position (so from -272px it would move -544px [272+272])
5. Then STOP
6. And Repeat . . .

[Fairview]

"sloppy done..."

?

Wow. What an insolent whiner you are.

I think the "text" that you posted is "sloppy done." I can't honestly call it code. Try and get Hotscripts to accept that. :-)

[mikewgd]

Well that's no way to respond to the post.