Как обойти зависимость переключения слайдов однотипных фоторам?

Question

[GreenMan1899]

Сайт

Для создания фоторамы использую два слайдера slick (один как слайд, другой как пагицанию-тамбы). Однако ситуация такая, что эта "фоторама' является частью другого большого слайда товара. И т.к. эти товары выводятся через цикл, то им присуждается одинаковые классы.
И получается так, что пагинация через тамбы любой фоторамы (в моем случае slider-nav) переключает слайды всех фоторам у других товаров.
Т.е. проще говоря: если я попереключаю слайды фоторамы одного товара, а потом переключусь на другой, то там уже фоторама будет не с 1 позиции.

Вот часть кода вместе с django

<!-- Additional required wrapper -->
<div class="swiper-wrapper block-items-slider">
    <!-- Slides -->
    {% get_discount_doors as doors %}
    {% for door in doors %}
        <div class="swiper-slide">
            {% get_images for door.original_door as images %}
            <div class="block-item">
                <div class="block-title">
                    <h2>{{ door.original_door.long_title }}</h2>
                </div>
                <div class="row block-items-row">
                    <div class="col-xs-5 block-items-slider">
                        <div class="main">
                            <!-- СЛАЙДЕРЫ -->
                            <div class="slider slider-for mfp-gallery">
                                {% for image in images %}
                                <div>
                                    <a href="{{ image.promodoorimg.url }}">
                                        <img src="{{ image.promoimg.url }}" alt="{{ image.title }}">
                                        <div class="gallery-img-title">{{ image.title }}</div>
                                    </a>
                                </div>
                                {% endfor %}
                            </div>

                            <!-- МИНИАТЮРЫ -->
                            <div class="slider slider-nav">
                                {% for image in images %}
                                <div><img src="{{ image.promothumb.url }}" alt="{{ image.title }}"></div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    {% endfor %}
</div>

А вот инициализация "фоторамы:

$('.slider-for').slick({
      slidesToShow: 2,
      slidesToScroll: 1,
      arrows: false,
      asNavFor: '.slider-nav'
});

$('.slider-nav').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      arrows: false,
      asNavFor: '.slider-for',
      focusOnSelect: true
});

в других ситуация помогал each, но тут не помогло.

Answer 1

[GreenMan1899]

Кому интересно, решил так:
дописал к классам переменную через django
в итоге классы стали "slider slider-for slider-for{{forloop.counter}} mfp-gallery"и "slider slider-nav slider-nav{{forloop.counter}}".

И код инициализации стал таким:

$('.fp-block-items .swiper-slide').each(function(n){

    var asNavFor_for = '.slider-nav'+(n+1);
    var asNavFor_nav = '.slider-for'+(n+1);

    $(this).find('.slider-for'+(n+1)).slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: asNavFor_for,
    });

    $(this).find('.slider-nav'+(n+1)).slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: asNavFor_nav,
        focusOnSelect: true,
    });

});