My site has a page where there is a Carousel for each of the collection. For some reason the spacing of the item on the carousel is different for the first one. On the simple pages screen all of the carousel shortcode is the same except for the collection number. I have updated the plugin. I suspect that there is some CSS that is affecting the carousel, but I can not figure out where it is coming from or why it would only be effecting the first instance.
You have to check the Simple Page code. For each of the <li> elements there is a global style defined in jcarousel.responsive.css file: .jcarousel li {width: 200px;}
For the first carousel “Maine State Archives” you have additional inline css that has to be hard-coded on the SimplePage: <li style="width: 354px;">...</li>
It looks more to me like a CSS issue, combined with how the carousel does selectors.
Not 100% sure that this will fix it, but if you have access to the plugins/ShortcodeCarousel/views/public/css/jcarousel.css.responsive file, look for this
width: 200px;
and change it to
width: 200px !important;
Those are right under the line, should be line 29:
.jcarousel li {
It’s a somewhat cheesy fix, but that’s my best guess at the changes to happen.
The issue looks like the way the javascript and CSS interact with the way the selectors work when there are multiple carousels on the page. Hopefully I’ll find a better fix, but this is worth a try.
If you can try that fix on your site, I’d appreciate feedback about whether it works.