Problem with responsive slider shortcode in sidebar

Hello,

I am using the responsive slider shortcode on one of my websites and placed it in my sidebar. Unfortunately, the styles are a bit messed up and the slider doesn’t display correctly. I fixed most of it, but I still have one problem, that I can’t seem to fix. Every next image in the slider appears a bit lower than the one before. Can you please help me fix this problem?

I placed a div-tag with a CSS class “spreadshirt-sidebar” around it, so I can apply my fix:

.spreadshirt-sidebar ul.flex-direction-nav {
    overflow: hidden;
    margin: 0;
    list-style: none;
}

.spreadshirt-sidebar a.flex-prev, .spreadshirt-sidebar a.flex-next {
    text-decoration: none !important;
    top: 57%;
}

And my slider code looks like this:

<div class="spreadshirt-sidebar">
    [slider no_container="true" animation="slide" slide_time="5000" slide_speed="600" slideshow="false" random="false" control_nav="false" prev_next_nav="true"]
    [slide]<a href="http://some-url.com" target="_blank"><img src="http://some-url.com" alt="Example"></a>[/slide]
    [slide]<a href="http://some-url.com" target="_blank"><img src="http://some-url.com" alt="Example"></a>[/slide]
    [slide]<a href="http://some-url.com" target="_blank"><img src="http://some-url.com" alt="Example"></a>[/slide]
    [/slider]
</div>

Hey Matthias,

The issue is because of WordPress autop. It wraps each shortcode inside a <p> element if you leave new line breaks like your code above. You should eliminate those new lines like this:

<div class="spreadshirt-sidebar">[slider no_container="true" animation="slide" slide_time="5000" slide_speed="600" slideshow="false" random="false" control_nav="false" prev_next_nav="true"][slide]<a href="https://www.spreadshirt.de/die+evolution+des+rasenmaehens+maenner+neppy-shirt-D5b534d762225094fa990c3fa?sellable=BqDegj1XZku01qRzDqQo-klHNQ&amp;view=1" target="_blank" rel="noopener"><img src="//image.spreadshirtmedia.net/image-server/v1/mp/products/T1273A748MPA3091PT17X61Y27D149733920FS2546/views/1,width=800,height=800,appearanceId=748,backgroundColor=E8E8E8,version=1520341294/die-evolution-des-rasenmaehens-maenner-neppy-shirt.jpg" alt="Example" /></a>[/slide][slide]<a href="https://www.spreadshirt.de/i+love+maehroboter+maenner+neppy-shirt-D5b545f542225094fa9ae2971?sellable=przvxqO2olt0DlywLn40-klHNQ&amp;view=1" target="_blank" rel="noopener"><img src="//image.spreadshirtmedia.net/image-server/v1/mp/products/T635A399MPA1289PT17X71Y99D149753682FS2546/views/1,width=800,height=800,appearanceId=399,backgroundColor=E8E8E8,version=1458631742/i-love-maehroboter-maenner-bio-t-shirt.jpg" alt="Example" /></a>[/slide][slide]<a href="https://www.spreadshirt.de/i+love+maehroboter+maenner+bio-t-shirt-D5b545f555fd3e473441a2d75?sellable=E70MJjmj9puB2kbEq7lN-NjHR2&amp;view=1_1429" target="_blank" rel="noopener"><img src="//image.spreadshirtmedia.net/image-server/v1/mp/products/T1273A748MPA3091PT17X67Y21D149753781FS2408/views/1,width=800,height=800,appearanceId=748,backgroundColor=E8E8E8,version=1520341294/i-love-maehroboter-maenner-neppy-shirt.jpg" alt="Example" /></a>[/slide][/slider]</div>

I replaced your slider with that code and it’s now fixed (see secure note).

To avoid having to manually do this, I’d recommend you create a new Global Block and in it, use the Classic Slider element.

You can then insert the global block’s shortcode to the Text widget.

Hope that helps.

1 Like

Thank you very much! That worked!

Creating global blocks is a good idea! Thank you! :slight_smile:

You’re welcome. Glad we could help. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.