CODEWITHSUNDEEP
jqueryanimationjquery-pluginscarousel
Justine
Justine

Reputation: 1908

jQuery carousel animation jumping

I'm using CarouFredSel jQuery plugin (http://caroufredsel.dev7studios.com) to create animated carousel on my site. However, I noticed the animation isn't correct - it animates waaay too far (compared to the settings I've coded), then at the end of animation, it jumps to the correct position.

Here's the page where the bug occurs: http://mnogal.pl/kopernik/html/strona_glowna.html - the text should always be in the middle, and the animation should just move to position the next text in the middle.

It's setup like PIC 1 - TEXT - PIC 2 - TEXT - PIC 1 etc. at the moment, so it should alternate the two pictures position after each animation, if that makes sense.

I ends up showing the correct thing after animation, it's just animating way too far and jumping before it ends.

I checked the demo on the side and nothing like that happens, my code also seems correct, nothing out of the ordinary:

$("#carousel .overview").carouFredSel({
    height: 507,
    items: {
          visible: 3,
    },
    scroll: {
        items: 2,
        duration: 3000
    },
    auto: 6000
});

Can anyone help? I can't figure this out.

Upvotes: 4

Views: 1775

Answers (3)

ichigolas
ichigolas

Reputation: 7725

You may want to try this: http://jsfiddle.net/mW5Y9/2/. A live demo of what @MichaelCalkins means. 

<div id="myCarousel" class="carousel slide" data-interval="your_interval_in_secs">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Upvotes: 0

Michael J. Calkins
Michael J. Calkins

Reputation: 32655

May I recommend Twitter Bootstrap.

Examples at bottom: http://twitter.github.com/bootstrap

Carousel example: http://twitter.github.com/bootstrap/examples/carousel.html

Carousel code: http://twitter.github.com/bootstrap/javascript.html#carousel

Upvotes: 2

Dieter
Dieter

Reputation: 441

There is no scripts.js (http://mnogal.pl/kopernik/html/js/scripts.js) on the server. The error this generates prevents other javascript from running. Get that fixed first!

Upvotes: 7

Related Questions