multiple carousels one page need different param settings
laredo4538 opened this issue · comments
LJT commented
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 commented
<!-- 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>