Django | Последовательный вывод

Вот код карусели:

 <div class="col-md-5 col-sm-5 col-xs-12">
                                    <div class="imgs-zoom-area">
                                        <img id="zoom_03" src="#" data-zoom-image="#" alt="222">
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div id="gallery_01" class="carousel-btn slick-arrow-3 mt-30">
                                                    <div class="p-c">
                                                        <a href="#" data-image="#" data-zoom-image="#">
                                                            <img class="zoom_03" src="#" alt="">
                                                        </a>
                                                    </div>
                                                    <div class="p-c">
                                                        <a href="#" data-image="img/product/3.jpg" data-zoom-image="img/product/3.jpg">
                                                            <img class="zoom_03" src="img/product/3.jpg" alt="">
                                                        </a>
                                                    </div>
                                                    <div class="p-c">
                                                        <a href="#" data-image="img/product/4.jpg" data-zoom-image="img/product/4.jpg">
                                                            <img class="zoom_03" src="img/product/4.jpg" alt="">
                                                        </a>
                                                    </div>
                                                    <div class="p-c">
                                                        <a href="#" data-image="img/product/5.jpg" data-zoom-image="img/product/5.jpg">
                                                            <img class="zoom_03" src="img/product/5.jpg" alt="">
                                                        </a>
                                                    </div>
                                                    <div class="p-c">
                                                        <a href="#" data-image="img/product/6.jpg" data-zoom-image="img/product/6.jpg">
                                                            <img class="zoom_03" src="img/product/6.jpg" alt="">
                                                        </a>
                                                    </div>
                                                    <div class="p-c">
                                                        <a href="#" data-image="img/product/7.jpg" data-zoom-image="img/product/7.jpg">
                                                            <img class="zoom_03" src="img/product/7.jpg" alt="">
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

Вот код Admin.py:

    class GalleryAdmin(admin.TabularInline):
    fk_name = 'product'
    model = Gallery

@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
    prepopulated_fields = {"slug": ("name",)}
    inlines = [GalleryAdmin,]

Вот код модели:

    class Product(models.Model):
    name = models.CharField(max_length=255)
    description = models.CharField(max_length=1000)
    information = models.CharField(max_length=1000)
    brand = models.ForeignKey(Brand,
                              on_delete=models.CASCADE,
                              related_name='Brand')

    rating = models.PositiveSmallIntegerField(default=0)
    color = models.CharField(max_length=100, default=None)
    slug = models.SlugField(max_length=400, unique=True, db_index=True, verbose_name="URL", default=None)

    def get_absolute_url(self):
        return reverse('product', kwargs={'product_slug':self.slug})

    def __str__(self):
        return '{brand} {name} {color}'.format(
            brand=self.brand,
            name=self.name,
            color=self.color,
        )


class Gallery(models.Model):
    image = models.ImageField(upload_to='gallery', help_text='270x300')
    product = models.ForeignKey(Product,
                                on_delete=models.CASCADE,
                                related_name='images')

    def __str__(self):
        return self.product.name

Вот код Views:

    def index(request):
    ads = Ad.objects.all()

    return render(request, 'index.html', {'ads': ads})


class ProductDetailView(DetailView):
    model = Product
    template_name = 'product-detail.html'
    context_object_name = 'product'
    slug_url_kwarg = 'product_slug'

Урлы не вижу смысла кидать.

Задача

В карусели нужно выводить последовательно фотографии из Галереи модели Продукта.

Мои попытки это реализовать:

{% for images in product.images.all() %}

И дальше что-то типа:

images.images.url

Но, загвоздка в том, что выводятся все изображения сразу и/или ломается сама карусель. Как можно обращаться к определенному обьекту в галерее, чтобы вывести его в карусель. Ну вот как реализовано на е-ком сайтах по продаже чего-либо.

{% for images in product.images.all %} # Создаю цикл для Галереии
  {% if forloop.counter == 1 %} # 1 раз прогоняю его
<img id="zoom_03" src="{{ images.image.url }}" data-zoom-image="{{ images.image.url }}" alt="222"> #главное изображение
  {% endif %}
{% endfor %}
<div class="row">
 <div class="col-xs-12">
  <div id="gallery_01" class="carousel-btn slick-arrow-3 mt-30">
   {% for images in product.images.all %} #снова прогоняю цикл
    <div class="p-c">
     <a href="{{ images.image.url }}" data-image="{{ images.image.url }}" data-zoom-image="{{ images.image.url }}"> # та-дам, все работает как и задумано было.
      <img class="zoom_03" src="{{ images.image.url }}" alt="">
      </a>
     </div>
   {% endfor %}