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>