Desktop (default - w/ arrows):

  • Arrows force 4 wide image group to be closer together. When arrows are not present, images can expand to the grid's full width, with proper grid spacing in between.

Desktop (no arrows):

 

Mobile (Default - no arrows present):

 

<div class="carousel footer-gallery">
    <div class="mask">
        <div class="slideset">
            <div class="slide">
                <ul class="slide-holder">
                    <li><a href="#"><img src="images/img-05.jpg" alt="image description" width="269" height="150"></a></li>
                    <li><a href="#"><img src="images/img-06.jpg" alt="image description" width="269" height="150"></a></li>
                    <li><a href="#"><img src="images/img-07.jpg" alt="image description" width="269" height="150"></a></li>
                    <li><a href="#"><img src="images/img-08.jpg" alt="image description" width="269" height="150"></a></li>
                </ul>
            </div>
            <div class="slide">
                <ul class="slide-holder">
                    <li><a href="#"><img src="images/img-05.jpg" alt="image description" width="269" height="150"></a></li>
                    <li><a href="#"><img src="images/img-06.jpg" alt="image description" width="269" height="150"></a></li>
                    <li><a href="#"><img src="images/img-07.jpg" alt="image description" width="269" height="150"></a></li>
                    <li><a href="#"><img src="images/img-08.jpg" alt="image description" width="269" height="150"></a></li>
                </ul>
            </div>
        </div>
    </div>
    <a class="btn-prev" href="#">Previous</a>
    <a class="btn-next" href="#">Next</a>
</div>