Slideshow, Visibility issues, Visibility documentation issues.

[Whizfactor]

#4127 #4127 (comment)

I have similar issues and i am suffering from trying out various things with visibility.

Been battling with slide show controls visibility.

Is there a more detailed documentation on how UIkit responsiveness works? Cause i can't seem to get a hang of it in anyway. When i use one thing, another things shows.

MY AIM IS TO HAVE CONTROLS OF DIFFERENT SIZES FOR S, M, L, XL SCREENS, BUT I AM GETTING STRANGE RESULTS.

`
{# slideshow #}

<ul class="uk-slideshow-items slide-show">
    <li>
        <div class="uk-overflow-hidden">
            <img src="{% static 'images/....webp' %}" alt="" uk-cover class="uk-animation-reverse uk-transform-origin-top-right" uk-scrollspy="cls: uk-animation-kenburns; repeat: true">   
        </div>
        
    </li>
    <li>
        <div class="uk-overflow-hidden">
            <img src="{% static 'images/....webp' %}" alt="" uk-cover class="uk-animation-reverse uk-transform-origin-top-right" uk-scrollspy="cls: uk-animation-kenburns; repeat: true">   
        </div>
        
    </li>
    <li>
        <div class="uk-overflow-hidden">
            <img src="{% static 'images/.....webp' %}" alt="" uk-cover class="uk-animation-reverse uk-transform-origin-top-right" uk-scrollspy="cls: uk-animation-kenburns; repeat: true">   
        </div>
        
    </li>
</ul>

{# mobile slide show controls #}
<a class="uk-visible@s uk-position-center-left uk-position-small uk-hidden-hover" href uk-slideshow-item="previous">
    <span class="uk-align-center red-color " uk-icon="icon: chevron-left; ratio: 2;"></span>
</a>
<a class="uk-visible@s uk-position-center-right uk-position-small uk-hidden-hover" href uk-slideshow-item="next">
    <span class="uk-align-right red-color " uk-icon="icon: chevron-right; ratio: 2;"></span>
</a>
{# mobile slide show controls ends #}


{# tablet slide show controls #}
<a class="uk-hidden@m uk-position-center-left uk-position-small uk-hidden-hover" href uk-slideshow-item="previous">
    <span class="uk-align-right red-color " uk-icon="icon: chevron-left; ratio: 3;"></span>
</a>
<a class="uk-hidden@m uk-position-center-right uk-position-small uk-hidden-hover" href uk-slideshow-item="next">
    <span class="uk-align-left red-color " uk-icon="icon: chevron-right; ratio: 3;"></span>
</a>
{# tablet slide show controls ends #}


{# large tablets slide show controls #}
<a class="uk-visible@l uk-hidden@m uk-position-center-left uk-position-small uk-hidden-hover" href uk-slideshow-item="previous">
    <span class="uk-align-right red-color " uk-icon="icon: chevron-left; ratio: 4;"></span>
</a>
<a class="uk-visible@l uk-hidden@m uk-position-center-right uk-position-small uk-hidden-hover" href uk-slideshow-item="next">
    <span class="uk-align-left red-color " uk-icon="icon: chevron-right; ratio: 4;"></span>
</a>
{# large tablet slide show controls ends #}


{# desktop slide show controls #}
<a class="uk-visible@xl uk-position-center-left uk-position-small uk-hidden-hover" href uk-slideshow-item="previous">
    <span class="uk-align-right red-color " uk-icon="icon: chevron-left; ratio: 5;"></span>
</a>
<a class="uk-visible@xl uk-position-center-right uk-position-small uk-hidden-hover" href uk-slideshow-item="next">
    <span class="uk-align-left red-color " uk-icon="icon: chevron-right; ratio: 5;"></span>
</a>
{# desktop slide show controls ends #}

`

The above is just one of the experiments i stopped at after trying various things. I haven't looked into how your breakpoint works but when i tried using breakpoint instead of s, m, l i didn't get the desired results. How does the responsive work cause the visibility doc is nowhere near convincing.