ducking FlexSlider

 <link href="/static/flexslider/flexslider.css" rel="stylesheet" type="text/css">
        <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type='text/javascript' src="/static/flexslider/jquery.flexslider.js"></script>
        <script type='text/javascript' src="/static/flexslider/jquery.flexslider-min.js"></script>

        <script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
        <script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.easing.js"></script>
        <script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.mousewheel.js"></script>


        <script type="text/javascript">
            $(document).ready(function (){
                $('#flexslider').flexslider({
                    animation: "slides"
                });
            });
        </script>


{% extends "layout.html" %}

{% block title %}
    Index
{% endblock %}
    {% block main %}
        <form action="/upload">
            <input type="submit" value="Upload pictures" /><br><br>
        </form>
        <div class ="flexslider" id = flexslider>
            <ul class="flexslider">

                {% for user_image in user_images %}
                    <li>

                    <img style="max-height: 150px; max-width: 200px" src="{{ user_image.img_path }}" alt={{ user_image }}/>

                </li>
            </ul>
                {% endfor %}
        </div>
        {% for user_text in user_texts %}
            <p>
                {{ user_text.message }}.
            </p>
        {% endfor %}

    {% endblock %}