Adding multiple carousels to the page
For this Example scenario, let's say you want to place multiple repeaters with carousel to render content from different paths with different properties. In this scenario, all the carousels on the page will scroll when you scroll the desired carousel, so let me explain how you can change this behavior.
This is not supported by default in this web part, but it's possible to achieve with a few customizations. As first, I recommend creating a specific JS file for every web part you want to use on the same page. You can do that by cloning the file jquery-carousel.js in the folder
~\CMSScripts\jquery e.g.: jquery-carousel1.js,
jquery-carousel2.js, etc.
Then in every file change the name of method (around line: 204):
$.fn.jCarouselLite = function(o) {
to
$.fn.jCarouselLite1 = function(o) {
Next in the web part properties, you need to change every property to be related to that specific number, e.g (adding number 1).
Content before items:
<div class="carousel2d main">
<table>
<tr>
<td>
<a href="#"><div class="ppleft"></div></a>
</td>
<td>
<div class="jCarouselLite">
<ul>
to:
<div class="carousel2d1 main">
<table>
<tr>
<td>
<a href="#"><div class="ppleft1"></div></a>
</td>
<td>
<div class="jCarouselLite1">
<ul>
Content after items:
</ul>
</div>
</td>
<td>
<a href="#"><div class="ppright"></div></a>
</td>
</tr>
</table>
<div class="clear"></div>
</div>
</div>
to:
</ul>
</div>
</td>
<td>
<a href="#"><div class="ppright1"></div></a>
</td>
</tr>
</table>
<div class="clear"></div>
</div>
</div>
Script files:
jquery/jquery-carousel.js
to:
jquery/jquery-carousel1.js
Initialization script:
$=jQuery;
$(".carousel2d ..jCarouselLite").jCarouselLite({
btnNext: ".ppright",
btnPrev: ".ppleft",
visible: 5
});
to:
$=jQuery;
$(".carousel2d1 ..jCarouselLite1").jCarouselLite1({
btnNext: ".ppright1",
btnPrev: ".ppleft1",
visible: 5
});
... and similar with web part property: Inline CSS styles.