ansaurus

Question

creating a carousel with javascript?

Answer 1

A:

http://sorgalla.com/projects/jcarousel/

@Nishant: you can place any text you want within the jcarousel elements, view the source of this example for instance:

http://sorgalla.com/projects/jcarousel/examples/special_easing.html

jspcal 2010-01-16 05:49:51

how can i do that with text and image?

Josh 2010-01-16 05:52:02

-1 This question was specifically tagged with Prototype, not jQuery

Justin Johnson 2010-01-16 09:39:42

@Justin: you must've missed that it's *also tagged* javascript. jQuery and prototype can be *used together* without any problem.

jspcal 2010-01-16 10:06:14

No, no I didn't. Two libraries < one library

Justin Johnson 2010-01-16 10:16:25

no, re-using libraries is *better* than re-inventing the wheel (or the carousel in this case). jcarousel provides effects, auto-scrolling, animation, etc. which can be turned on by setting an option.

jspcal 2010-01-16 11:09:43

Answer 2

A:

Here's a simple approach that gets the job done with a minor change to the HTML

JavaScript

Event.observe(window, 'load', function() {
    var current  = 0,
        sections = $$('.section'),
        len      = sections.length;

    var clear = function() {
        sections.each(function(s) { s.hide(); });
    };

    Event.observe('prev', 'click', function(event){
        // No wrapping
        // current = Math.max(0, current - 1);

        // Wrapping
        current = (current - 1 < 0) ? (len - 1) : (current - 1);

        clear();
        sections[current].show();
    });

    Event.observe('next', 'click', function(event){
        // No wrapping
        // current = Math.min(len -1, current + 1);

        // Wrapping
        current = (current + 1 == len) ? 0 : (current + 1);

        clear(); 
        sections[current].show();
    });

    clear();
    sections[current].show();
});

HTML

  <div id="container">
    <div class="section" id="section1">
      <img src="images/image1.jpg" height="20" width="20" />
      <p> This is a image1 </p>
    </div>
    <div class="section" id="section2">
      <img src="images/image1.jpg" height="20" width="20" />
      <p> This is a image2 </p>     
    </div>
    <div class="section" id="section3">
      <img src="images/image1.jpg" height="20" width="20" />
      <p> This is a image3 </p>
    </div>
    <a id="prev" href="#">Prev</a>
    <a id="next" href="#">Next</a>
  </div>

You didn't specify whether or not you wanted to have the carousel wrap around to the opposite end once it reached the first or last pane, so I gave you the math for both.

Justin Johnson 2010-01-16 10:34:16

Thanks, you're right. I changed his markup but forgot to copy it over from my text page. It's both easier to code and to maintain to simply add a unifying CSS class to the elements that are part of the carousel's content. It's also highly likely to be useful from a CSS perspective if the OP wants the different sections of the carousel to be uniform in size, position, etc.

Justin Johnson 2010-01-16 11:39:01

ansaurus

tags:

views:

answers:

creating a carousel with javascript?

related questions