How to implement carousel effect using jQuery/JavaScript

Question

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 comes 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?

Look up jQuery#animate. It's very powerful once you know your way around in CSS. — John Dvorak
– John Dvorak, Commented Dec 26, 2012 at 8:55

Twineee The Dark Wizard · Accepted Answer · 2025-10-31 01:49:42Z

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

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

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();

#wrap {
     padding: 1em;
     background: #333;
}
 h1 {
     font-weight: bold;
}
 #controls {
     clear: both;
     height: 1em;
     margin: 0 0 1em 0;
}
 #controls div {
     float: left;
     margin: 0 0.5em 0 0;
     padding: 0.2em;
     color: #fff;
     background: #000;
     cursor: pointer;
}
 #caption, #content {
     background: #eee;
     width: 400px;
     position: relative;
     overflow: hidden;
}
 #caption .pan, #content .pan {
     width: 10000px;
     position: static;
}
 #caption .page, #content .page {
     width: 400px;
     float: left;
}
 #caption .page h1, #content .page h1, #caption .page p, #content .page p {
     margin: 0.2em 0.5em;
}
 #content .page {
     margin-right: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<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>

Thanks Tymek! One more question what do divs with class pan do here?
why cannot i use $(part).stop().animate(...)? In this way the selector also selects the div with class pan.

Collectives™ on Stack Overflow

How to implement carousel effect using jQuery/JavaScript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related