Javascript 响应幻灯片同一页面中的多张幻灯片

我对responsiveSlides（）有问题。我无法添加//具有不同ID的多个滑块，第一次加载，但其余仅显示第一个图像

JS：

    $(function() {
    $("#slider1").responsiveSlides({
        auto: false,
        pagination: true,
        nav: true,
        fade: 500,
        maxwidth: 800
    });

    $("#2-bedroom-apartment").responsiveSlides({
        auto: false,
        pagination: true,
        nav: true,
        fade: 500,
        maxwidth: 800
    });

    $("#luxury-penthouse").responsiveSlides({
        auto: false,
        pagination: true,
        nav: true,
        fade: 500,
        maxwidth: 800
    });

}(jQuery));

细枝代码：

            {% for seccion in imagenes %}
                {% if loop.first %}
                    <h3 class="social-links editor"><a href="#slider{{ seccion.id }}"><i class="fa fa-camera-retro"></i>&nbsp;&nbsp;{{ habitacion.etiqueta }}</a> </h3>
                    <div class="clearfix"></div>
                    <a href="#slider{{seccion.habitacion.slug }}">
                        <img src="{{ asset(seccion.imagen.webPath | apply_filter('articulo')) }}">
                    </a>


                <div id="slider{{seccion.habitacion.slug }}" class="modalDialog">
                    <div>
                        <a href="#close" title="Close" class="close">X</a>
                        <div class="rslides_container img-responsive">
                            <ul class="rslides" id="{{seccion.habitacion.slug }}">
                                {% for seccion in imagenes %}
                                    <li><img src="{{ asset(seccion.imagen.webPath) }}" alt="{{ seccion.imagen.alt }}" title="{{ seccion.imagen.descripcion }}"> </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
                {% endif %}
            {% endfor %}

{%用于imagenes%中的seccion}
{%if loop.first%}

{imagenes%中seccion的%s}

{%endfor%}

{%endif%}
{%endfor%}

---

web:

它适用于第一种情况，因为您有条件

{%if loop.first%}

。如果你忽略这个条件，一切都会好的