<section class="gallery-our gallery-area">
<div class="container">
<div class="gallery">
<div class="gallery-area-text">
<h2 class="title-gallery">{{galleryArea.translate(locale).title}}</h2>
<div class="outline"></div>
<div class="gallery-p">{{galleryArea.translate(locale).subtitle}}</div>
</div>
<ul class="nav nav-tabs text-uppercase">
{% for category in galleries %}
<li class="{{loop.first ? "active"}}"><a data-toggle="tab" href="#{{category.translate(locale).slug}}">{{category.translate(locale).name}}</a></li>
{% endfor %}
</ul>
<br/>
<div class="tab-content">
{% for category in galleries %}
<div id="{{category.translate(locale).slug}}" class="tab-pane fade in {{loop.first ? "active"}}">
<div class="product ">
<div class="row">
{% for item in category.images|sort((a, b) => a.position <=> b.position)|slice(0,5) %}
<div class="gallery_product col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<div class="wrap-box">
<div class="box-img">
<img src="images/lazy.png" data-src="images/gallery/{{item.url}}" class="img-responsive lazy" alt="Product" title="images products">
</div>
<div class="gallery-box-main " title>
<div class="gallery-icon">
<a class="lightbox " href="images/gallery/{{item.url}}" data-littlelightbox-group="gallery" title="{{item.translate(locale).caption}}"><i class="ion-ios-plus-empty" aria-hidden="true" ></i> </a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
<!-- end-tab-content -->
<div class="text-center">
<a href="{{path('gallery_index')}}" type="button" class="btn btn-default btn-our">{{galleryArea.translate(locale).callToAction}}</a>
</div>
</div>
<!-- /gallery -->
</div>
<!-- /container -->
</section>