As far as carousels or any other Javascript elements, MODX doesn't care. Pick one that you like, then just put the links in your template to load their Javascript libraries and plugins, as you would on any flat HTML document. Use a listing snippet with a chunk tpl to format the snippet's output to match whatever the Javascript requires for its functions - HTML div or li elements, classnames, etc.
For example,
this one for example uses the
Jssor Slider JQuery plugin.
The images are taken from individual "product" resources using getResources, here is the HTML from my "shop" template - the JSsor Javascript library is loaded at the bottom of the page, after the JQuery and Bootstrap libraries are loaded:
<!-- Jssor Slider Begin -->
<div id="slider1_container" class="slider center-block">
<!-- Loading Screen -->
<div u="loading" class="loading">
<div class="loading-overlay"></div>
<div class="loading-indicator"></div>
</div>
<!-- Slides Container -->
<div u="slides" class="slides">
[[getResources?
&parents=`3`
&tpl=`slideshowTpl`
&depth=`0`
&includeContent=`1`
]]
</div>
<!--#region Arrow Navigator Skin Begin -->
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="top: 158px; left: 8px;"></span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="top: 158px; right: 8px"></span>
<!--#endregion Arrow Navigator Skin End -->
<!--#region Thumbnail Navigator Skin Begin -->
<!-- thumbnail navigator container -->
<div u="thumbnavigator" class="thumbnav jssort01">
<!-- Thumbnail Item Skin Begin -->
<div u="slides" style="cursor: default;">
<div u="prototype" class="p">
<div class=w><div u="thumbnailtemplate" class="t"></div></div>
<div class=c></div>
</div>
</div> <!-- Thumbnail Item Skin End -->
</div> <!--#endregion Thumbnail Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">Bootstrap Slider</a>
</div> <!-- Jssor Slider End -->
And this is what the getResources' "slideshowTpl" looks like:
<div>
<img u="image" src="[[+product_image:pthumb=`w=400&h=200&zc=`1`]]">
<img u="thumb" src="[[+product_image:pthumb=`w=68&h=68&zc=1`]]">
<div u="caption" t="MCLIP|B" style="position: absolute; top: 365px; left: 0px; right: 0; width: 676px; height: 50px; background: #000; opacity: 0.5; color: #fff;">
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px; background-color: Black; opacity: 0.5; filter: alpha(opacity=50);"></div>
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 50px; color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">[[+longtitle]]</div>
</div>
</div>
If you look a the Jssor demo page, you'll see that all I did was take the HTML block for one image in the slideshow, and modify it to use the MODX placeholders from getResources.
☆ A M B ☆