www.webdeveloper.com
Results 1 to 8 of 8

Thread: Carousel

  1. #1
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75

    Carousel

    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

  2. #2
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    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.

  3. #3
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75
    Ok, here you go:

    HTML Code:
    <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>
    Code:
    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);
    	}
    		
    }

  4. #4
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75
    Anyone?

  5. #5
    Join Date
    Jun 2011
    Posts
    34

  6. #6
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75
    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 . . .

  7. #7
    Join Date
    Jun 2011
    Posts
    34
    "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. :-)

  8. #8
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    75
    Well that's no way to respond to the post.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles