Untitled

<body data-responsejs='{
    "create": [
    { "breakpoints": [0,320,481,641,961], "mode": "markup", "prefix": "r" }
    ]}'
>
    <div data-r961="
        <ul class="flexslider-pager">
            <li><img src="whatever.jpg" alt="whatever"></li>
            <li><img src="whatever.jpg" alt="whatever"></li>
            <li><img src="whatever.jpg" alt="whatever"></li>
        </ul>
    "></div>

    <div class="flexslider"><!-- Slideshow Here --></div>

    <div data-r481="
        <ul class="flexslider-pager">
            <li><img src="whatever.jpg" alt="whatever"></li>
            <li><img src="whatever.jpg" alt="whatever"></li>
            <li><img src="whatever.jpg" alt="whatever"></li>
        </ul>
    "></div>

    <script src="jquery.js"></script>
    <script src="response.js"></script>
    <script src="flexslider.js"></script>
    <script>
        $('.flexslider').flexslider({
            manualControls: '.flexslider-pager li',
        });
    </script>
</body>

function runPlugins(){
    $('.flexslider').flexslider();
};

Response.create({
    mode: 'markup',
    prefix: 'r',
    breakpoints: [0,600,820,901]
});

jQuery(runPlugins);