source: participacion_consulta/participacion/templates/participacion.create.html

{% extends 'base.template.html' %}
{% load staticfiles %}
{% block title %}Participar en Consulta{% endblock %}
{% block content %}
    <form action="" role="form" method="post" autocomplete="off" id="encuesta_form">
        {% csrf_token %}
        <div class="swiper-container">
            <div class="swiper-wrapper">
                
                {% for key, value in preguntas.items  %}
                    <div class="swiper-slide">
                        {{ value.label | safe }}
                        <div class="input-field">
                            {{ value.field | safe }}
                        </div>
                    </div>
                {% endfor %}
                <div class="swiper-slide">
                    <div class="center">
                        <a type="button" class="btn submit waves-effect blue lighten-1" onclick="send_poll();">Enviar</a>
                    </div>
                </div>
                
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <a type="button" class="btn waves-effect blue lighten-1" href="{% url 'participacion_index' %}">Regresar</a>
    </form>
                  
{% endblock %}

{% block extraJs %}
<script>
    $(document).ready(function(){
        var swiper = $('.swiper-container').swiper({
            pagination: '.swiper-pagination',
            effect: 'slide',
            centeredSlides: true,
            paginationType: 'progress',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            speed: 800,
            spaceBetween: 80,
            allowSwipeToNext:false
        });
        swiper.nextButton.click(function(){
            swiper.unlockSwipeToNext();
            var progreso = control_progress();
            if (progreso) {
                swiper.slideNext();
            }
            swiper.lockSwipeToNext();            
        });
    });
</script>
{% endblock %}