multiple carousels one page need different param settings

[laredo4538]

Is it possible to setup echo.js to apply different options per element within one page? For instance I have a small carousel near the top of the page and a slider near the bottom of the page that is the width of the entire page. I want to apply different echo options to these separate features. Is this possible and if so how do I execute? Thanks for any suggestions!

[ljluestc]

<!-- Initialize Echo.js with common options -->
<script>
    echo.init({
        offset: 100,
        throttle: 250,
        unload: false,
        callback: function(element, op) {
            // Common callback logic here
        }
    });
</script>

<!-- First Carousel with custom options -->
<div class="carousel" data-echo="img/carousel1.jpg" data-echo-options='{ "offset": 50, "throttle": 100 }'>
    <!-- Carousel content -->
</div>

<!-- Second Carousel with different custom options -->
<div class="carousel" data-echo="img/carousel2.jpg" data-echo-options='{ "offset": 75, "throttle": 200 }'>
    <!-- Carousel content -->
</div>

<!-- Third Carousel with its own custom options -->
<div class="carousel" data-echo="img/carousel3.jpg" data-echo-options='{ "offset": 60, "throttle": 150 }'>
    <!-- Carousel content -->
</div>