{% if height or width %}
<style type="text/css">
    #slider_wrapper_{{ slider_id }} {
        {% if width %}
            width: {{ width }}px;
        {% endif %}

        {% if height %}
            height: {{ height }}px;
        {% endif %}
    }
</style>
{% endif %}

<div id="slider_wrapper_{{ slider_id }}" class="slider-wrapper theme-{{ theme }}">
    <div id="slider_{{ slider_id }}" class="{{ class_name }}">
    {% for image in images %}
        {% if image.link %}
            <a href="{{ image.link }}">
        {% endif %}
            <img id="{{ slider_id }}_slide_{{ forloop.counter }}" src="{{ image.url }}" alt="{{ image.alternate_text }}"
                 {% if image.transition %}data-transition="{{ image.transition }}" {% endif %}
                 {% if image.caption %}title="#{{ slider_id }}_caption_{{ forloop.counter }}" {% endif %}  />
         {% if image.link %}
             </a>
         {% endif %}
    {% endfor %}
    </div>
</div>

{% for image in images %}
    {% if image.caption %}
        <div id="{{ slider_id }}_caption_{{ forloop.counter }}" class="nivo-html-caption">{{ image.caption }}</div>
    {% endif %}
{% endfor %}

<script type="text/javascript">
    jQuery(function($){
        $("#slider_" +"{{ slider_id }}").nivoSlider({
            effect: '{{ effect }}',
            slices: {{ slices }},
            boxCols: {{ box_cols }},
            boxRows: {{ box_rows }},
            animSpeed: {{ animation_speed }},
            pauseTime: {{ pause_time }},
            startSlide: {{ start_slide }},
            directionNav: {{ direction_nav }},
            controlNav: {{ control_nav }},
            controlNavThumbs: {{ control_nav_thumbs }},
            pauseOnHover: {{ pause_on_hover }},
            manualAdvance: {{ manual_advance }},
            prevText: '{{ prev_text }}',
            nextText: '{{ next_text }}',
            randomStart: {{ random_start }}
        });
    });
</script>