Как сделать собственные элементы управления для четырех слайдеров, которые рендерятся for loop'ом?

Привет!
Есть bx slider, для которого я хочу вынести элементы управления. Слайдер генерируется лупом, всего четыре слайдера (на данный момент). Элементы управления задаются присваиванием id, но я не знаю как изменять id с каждым лупом, поэтому получается как на скрине joxi.ru/RmzzWj1FW7nqRm в первый слайдер набиваются контрол элементс от всех слайдеров.

$('.allmedsdeps').bxSlider({
                    slideWidth: 64,
                    minSlides: 2,
                    maxSlides: 7,
                    slideMargin: 10,
                    pager: false,
                    nextSelector: '#alldepsnext',
                    prevSelector: '#alldepsprev',
                    nextText: '<i class="fa fa-arrow-right"></i>',
                    prevText: '<i class="fa fa-arrow-left"></i>'
                });

<div class="col-md-12">
                                <h4>Направления:
 
                                    <a class="btn btn-xs btn-default hidewhensm" id="alldepsprev"></a>
                                    <a class="btn btn-xs btn-default hidewhensm" id="alldepsnext"></a>
                                    <a href="{% url 'all_departments' %}" class="btn btn-xs btn-primary"> ВСЕ
                                        <span class="badge">
                                            {{ departments|length }}
                                        </span>
                                    </a>
                                </h4>
                                <div class="hidewhensm">
                                <div class="allmedsdeps">
                                {% if departments %}
                                {% for dep in departments %}
                                    {% for mcenter in dep.where.all %}
                                        {% if mcenter.title == center.title %}
 
                                                <div class="slide">
                                                    <a href="{% url 'department_details' pk=dep.pk %}">
                                                        <img src="{{ dep.logo.url }}" title="{{ dep.title }}" class="navbarshadow">
                                                    </a>
                                                </div>
 
                                        {% endif %}
                                    {% endfor %}
                                {% endfor %}
                                </div>
                                </div>
 
                                {% else %}
                                    <div class="col-md-6">
                                        Извините, произошло что-то странное и отделения не отображаются, скорее,
                                        свяжитесь с нами через<a href="{% url 'contact' %}"> контактную форму</a>.
                                    </div>
                                {% endif %}
 
                            </div>