Versions Compared

Old Version 5

changes.mady.by.user Joe Rios

Saved on

compared with

New Version Current

changes.mady.by.user Tony Carter

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

Image Added

Desktop (no arrows)

Needs arrows in screenshots (Desktop)

...

:

 

Mobile (Default - no arrows present):

 

Code Block
<div class="carousel footer-gallery">
    <div class="mask">
        <div class="slideset">
            <div class="slide">
                <ul class="slide-holder">
                    <li><a href="#"><img src="images/img3img-05.jpg" width="216" height="140" alt="image- description"></a></li>
                    <li><a href="#"><img src="images/img4.jpg" width="216269" height="140" alt="image-description"150"></a></li>
                    <li><a href="#"><img src="images/img5img-06.jpg" width="216" height="140" alt="image- description"></a></li>
                    <li><a href="#"><img src="images/img6.jpg" width="216269" height="140" alt="image-description"150"></a></li>
                </ul>
            </div>
            <div class="slide">
                <ul class="slide-holder">
                    <li><a href="#"><img src="images/img4img-07.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img6.jpg" description" width="216269" height="140" alt="image-description"150"></a></li>
                    <li><a href="#"><img src="images/img3img-08.jpg" width="216" height="140" alt="image- description"></a></li>
                    <li><a href="#"><img src="images/img5.jpg" width="216269" height="140" alt="image-description"150"></a></li>
                </ul>
            </div>
            <div class="slide">
                <ul class="slide-holder">
                    <li><a href="#"><img src="images/img4img-05.jpg" width="216" height="140" alt="image- description"></a></li>
                    <li><a href="#"><img src="images/img3.jpg" width="216269" height="140" alt="image-description150"></a></li>
                    <li><a href="#"><img src="images/img5img-06.jpg" width="216" height="140" alt="image- description"></a></li>
                    <li><a href="#"><img src="images/img6.jpg" width="216269" height="140" alt="image-description"150"></a></li>
                </ul>
            </div>
            <div class="slide">
                <ul class="slide-holder">
                    <li><a href="#"><img src="images/img6img-07.jpg" width="216" height="140" alt="image-description"></a></li>
                    <li><a href="#"><img src="images/img5.jpg description" width="216269" height="140" alt="image-description150"></a></li>
                    <li><a href="#"><img src="images/img4img-08.jpg" width="216" height="140" alt="image- description"></a></li>
                    <li><a href="#"><img src="images/img3.jpg" width="216269" height="140" alt="image-description150"></a></li>
                </ul>
            </div>
        </div>
    </div>
    <a class="btn-prev" href="#">Previous</a>
    <a class="btn-next" href="#">Next</a>
</div>