Country Fair slider

This is an image comparison slider created for a story about the Country Fair.

Working example

Working story example

Code tutorial: Mobile-friendly, responsive scrubber

Lightning implementation:

<!-- This sets the height of the container. Set value depending on max height of image. -->
<div style=”max-height:980px!important;”>

    <!-- .mm makes it responsive and the padding-bottom makes it fill the full image -->
    <div class=”mm” style=”padding-bottom:100%;”>

        <!-- This is the iframe to the github page. Height is max height -->
        <iframe src=”http://pages.registergaurd.com/slider/” width=”100%” height=”980” frameBorder=”0” scrolling=”no”></iframe>

    </div>

</div>

See https://github.com/registerguard/tracker/issues/455 for more info.