You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Current »

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">
    <div class="mask">
        <div class="slideset">
            <div class="slide">
                <ul class="slide-holder">
                    <li><a href="#"><img src="images/img3.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img4.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img5.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img6.jpg" width="216" height="140" alt="image-description"></a></li>
                </ul>
            </div>
            <div class="slide">
                <ul class="slide-holder">
                    <li><a href="#"><img src="images/img4.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img6.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img3.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img5.jpg" width="216" height="140" alt="image-description"></a></li>
                </ul>
            </div>
            <div class="slide">
                <ul class="slide-holder">
                    <li><a href="#"><img src="images/img4.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img3.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img5.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img6.jpg" width="216" height="140" alt="image-description"></a></li>
                </ul>
            </div>
            <div class="slide">
                <ul class="slide-holder">
                    <li><a href="#"><img src="images/img6.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img5.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img4.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img3.jpg" width="216" height="140" alt="image-description"></a></li>
                </ul>
            </div>
        </div>
    </div>
    <a class="btn-prev" href="#">Previous</a>
    <a class="btn-next" href="#">Next</a>
</div>