Shortcode Carousel spacing issues

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.

Link to the page I am talking about :

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>

There is nothing hard coded into the simple page code it looks like this:

<h1><a title="Maine State Archives" href=";advanced%5B0%5D%5Belement_id%5D=&amp;advanced%5B0%5D%5Btype%5D=&amp;advanced%5B0%5D%5Bterms%5D=&amp;range=&amp;tags=&amp;collection=1&amp;user=&amp;public=&amp;submit_search=Search+for+items">Maine State Archives</a></h1>
<p><span><span>[recent_carousel</span>&nbsp;showtitles=true autoscroll=true inveral</span>=7000 collection=1 <span>sort=added</span>]</p>
<h1><a title="Maine State Library" href=";advanced%5B0%5D%5Belement_id%5D=&amp;advanced%5B0%5D%5Btype%5D=&amp;advanced%5B0%5D%5Bterms%5D=&amp;range=&amp;tags=&amp;collection=2&amp;user=&amp;public=&amp;submit_search=Search+for+items">Maine State Library</a></h1>
<p><span><span>[recent_carousel&nbsp;showtitles=true autoscroll=true inveral=7000 collection=2 sort=added]</span></span></p>

I see what you are seeing my I do not know where the

  • is coming from.

    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.

    Added this to the css, no change that I can see.

    Hmm…I’m seeing it on my end. Maybe try a different browser and/or clear the cache for the site, or hard refresh the page (often cntl-F5)?

    Posting screenshots illustrating the problem you’re seeing might help everybody get on the same page here.

    Thank you, once I cleared the cache I could see that it was working.

    This topic was automatically closed after 250 days. New replies are no longer allowed.