I found a JavaScript carousel here.

When you click right or left button on the webpage, the page scrolls dynamically with animation, and the animation speed of title and the content is different.
I guess it can be done with jQuery or JavaScript.

Using traditional JavaScript, it is very hard to implement this moving animation effect.
It is easy to implement it without the moving animation, but when it es to implementation with the moving animation, I think it's very hard for me.

I looked up jQuery APIs for the solution, but I still didn't get the idea. Could someone anyone give me a hint how to implement this effect?

I found a JavaScript carousel here.

When you click right or left button on the webpage, the page scrolls dynamically with animation, and the animation speed of title and the content is different.
I guess it can be done with jQuery or JavaScript.

Using traditional JavaScript, it is very hard to implement this moving animation effect.
It is easy to implement it without the moving animation, but when it es to implementation with the moving animation, I think it's very hard for me.

I looked up jQuery APIs for the solution, but I still didn't get the idea. Could someone anyone give me a hint how to implement this effect?

• javascript
• jquery
• html
• css
• web

Share Improve this question Follow edited Dec 26, 2012 at 9:49 Pranav 웃 8,46766 gold badges4040 silver badges4848 bronze badges asked Dec 26, 2012 at 8:51 josh kuglerjosh kugler 9522 gold badges22 silver badges1111 bronze badges 2

• Look up jQuery#animate. It's very powerful once you know your way around in CSS. – John Dvorak Commented Dec 26, 2012 at 8:55
• you can get this idea from Ariel Flesler's blog – Rahul Commented Dec 26, 2012 at 9:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Animation time is equal, but width of animating element is different. That's easy. Paralax-like slider.

Here's solution: http://jsfiddle/Tymek/6M5Ce/ for example

HTML

<div id="wrap">
    <div id="controls">
        <div class="prev">&larr;</div>
        <div class="next">&rarr;</div>
    </div>
    <div id="caption"><div class="pan">
        <div class="page"><h1>Lorem ipsum</h1></div>
        <div class="page"><h1>Litwo! Ojczyzno moja!</h1></div>
        <div class="page"><h1>Drogi Marszałku, Wysoka Izbo.</h1></div>        
    </div></div>

    <div id="content"><div class="pan">
        <div class="page"><p>Dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p></div>
        <div class="page"><p>Ty jesteś jak zdrowie. Nazywał się przyciągnąć do domu, fortuny szczodrot objaśniają wrodzone wdzięki i musiał pochodzić od Moskwy szeregów które już bronić nie chciałby do sądów granicznych. Słusznie Woźny cicho wszedł służący, i gdzie panieńskim rumieńcem dzięcielina pała.</p></div>
            <div class="page"><p>PKB rośnie Nikt inny was nie trzeba udowadniać, ponieważ zakres i miejsce szkolenia kadry odpowiadającego potrzebom. Gdy za sobą proces wdrożenia i rozwijanie struktur powoduje docenianie wag istniejących kryteriów zabezpiecza.</p></div>
    </div></div>
</div>​

SCSS

$sliderwidth: 400px;

#wrap {
    padding: 1em;
    background: #333;
}

h1 {
    font-weight: bold;
}

#controls {
    clear: both;
    height: 1em;
    margin: 0 0 1em 0;
    div {
        float: left;
        margin: 0 0.5em 0 0;
        padding: 0.2em;
        color: #FFF;
        background: #000;
        cursor: pointer;
    }
}

#caption, #content {
    background: #EEE;
    width: $sliderwidth;
    position: relative;
    overflow: hidden;
    .pan {
        width: 10000px;
        position: static;
    }
    .page {
        width: $sliderwidth;
        float: left;
        h1, p {
            margin: 0.2em 0.5em;
        }
    }
}
#content {
    .page {
        margin-right: $sliderwidth;
    }
}
​

JS

var slider = {
    length: parseInt($("#caption .page").length),
    current: 1,
    width: $("#caption").width(),
    next: function(){
        if(this.current < this.length){
            this.current = this.current + 1;
            this.animation();
        } else {
            this.current = 1;
            this.animation();
        }
    },
    animation: function(){
        var target = (0 - this.width) * (this.current - 1);
        this.run("#caption", target);
        target = target * 2;
        this.run("#content", target);
    },
    prev: function(){
        if(this.current > 1){
            this.current = this.current - 1;
            this.animation();
        } else {
            this.current = this.length;
            this.animation();
        }
    },
    run: function(part, target){
        $(part + " .pan").stop().animate(
            {"margin-left": target},
            1000
        );
    },
    initialize: function(){
        $("#controls .next").click(function(){slider.next();});
        $("#controls .prev").click(function(){slider.prev();});
    }
}

slider.initialize();
​