Conditionally load
a slider in
responsive designs.

This demo uses :

• Dave Olsen (@dmolsen) lazyBlock script : Conditionally load content in responsive designs without relying on AJAX
• and
• Swipe by Brad Birdsall (@BradBirdsall)

Content is included in the original mark-up but is commented out. Based on user action or media queries, the content can then be uncommented and injected into the DOM by lazyBlock.

@dmolsen

I only used the user action in this demo, you can see @dmolsen lazyBlock demo for media queries example (using matchmedia)

<div id="hidden-images-panel" style="display:none;">
  <!--
    <ul>
      <li style="display:none;">
        <img src="img/2.jpg" alt="">
      </li>
      <li style="display:none;">
        <img src="img/3.jpg" alt="">
      </li>
      <li style="display:none;">
        <img src="img/4.jpg" alt="">
      </li>
      <li style="display:none;">
        <img src="img/5.jpg" alt="">
      </li>
      <li style="display:block;">
        <img src="img/1.jpg" alt="">
      </li>
    </ul>
  -->
</div>
<div id="slider-nav">
    <a id="prev" ><span>←</span></a>
    <a id="next" ><span>→</span></a>
</div>

I use lazyBlock custom events (onLBComplete) to create the slider (thanks to Swipe.js) :

lB.getById("hidden-images-link").onclick = function() { lB.toggle(this) };
lB.bind("hidden-images-link","onLBShow",function() {
    lB.getById("hidden-images-status").innerHTML = "Hide "; 
});
lB.bind("hidden-images-link","onLBHide",function() {
    lB.getById("hidden-images-status").innerHTML = "Show "; 
});
lB.bind("hidden-images-link","onLBComplete",function() {
    var slider = new Swipe(document.getElementById("hidden-images-panel"));
    document.getElementById("slider-nav").style.display = "block"; 
    document.getElementById("prev").onclick = function(){slider.prev(); return false;};
    document.getElementById("next").onclick = function(){slider.next(); return false;};
});

and voilà :