aşağıda html kodlar var sıraladığımda ilk resmin classına aktif yapmam lazım diğerleri sıraya girecek sorun bu tam olarak

                    <div class="col-lg-5">
<!-- Thumbnail Large Image start -->
<div class="tab-content">
<div id="thumb1" class="tab-pane active">
<a data-fancybox="images" href="img/products/1.jpg"><img src="img/products/1.jpg" alt="product-view"></a>
</div>
<div id="thumb2" class="tab-pane">
<a data-fancybox="images" href="img/products/2.jpg"><img src="img/products/2.jpg" alt="product-view"></a>
</div>
<div id="thumb3" class="tab-pane">
<a data-fancybox="images" href="img/products/3.jpg"><img src="img/products/3.jpg" alt="product-view"></a>
</div>
<div id="thumb4" class="tab-pane">
<a data-fancybox="images" href="img/products/4.jpg"><img src="img/products/4.jpg" alt="product-view"></a>
</div>
</div>
<!-- Thumbnail Large Image End -->

<!-- Thumbnail Image End -->
<div class="product-thumbnail">
<div class="thumb-menu nav">
<a class="active" data-toggle="tab" href="#thumb1"> <img src="img/products/1.jpg" alt="product-thumbnail"></a>
<a data-toggle="tab" href="#thumb2"> <img src="img/products/2.jpg" alt="product-thumbnail"></a>
<a data-toggle="tab" href="#thumb3"> <img src="img/products/3.jpg" alt="product-thumbnail"></a>
<a data-toggle="tab" href="#thumb4"> <img src="img/products/4.jpg" alt="product-thumbnail"></a>
</div>
</div>
<!-- Thumbnail image end -->
                    </div>