Slider navigation outside “overflow:hidden” – element position change alert

To allow better positioning of navigation elements in product slider on Disco template a change to elements nesting has been made. .product-slider-pagination and .product-slider-navigation are now a level higher in nesting hierarchy, positioned outside the hidden overflow element .product-slider.

This change allows for navigation elements to be still visible while positioned further from actual slider window.

Element nesting before the change

<div class="product-slider-holder">
    <div class="product-slider" style="overflow:hidden">
        <div class="products-block"></div>
        <div class="product-slider-pagination"></div>
        <button class="product-slider-navigation navigation-prev"></button>
        <button class="product-slider-navigation navigation-next"></button>
    </div>  
</div>

Element nesting after the change

<div class="product-slider-holder">
    <div class="product-slider" style="overflow:hidden">
        <div class="products-block"></div>
    </div>  
    <div class="product-slider-pagination"></div>
    <button class="product-slider-navigation navigation-prev"></button> 
    <button class="product-slider-navigation navigation-next"></button> 
</div>

Post navigation