Simple Gallery For Product

It’s a simple gallery. We can use it as a tab.

So, Let’s go!

Step 1: HTML Code:

<div class="product-image-tabs">
   <div class="row">
      <div class="col-lg-3">
         <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item"> <a class="nav-link active" id="image-1-tab" data-bs-toggle="tab" href="#image-1" role="tab" aria-controls="image-1"> <img src="assets/images/shop/shop-1.png" alt="image"> </a> </li>
            <li class="nav-item"> <a class="nav-link" id="image-2-tab" data-bs-toggle="tab" href="#image-2" role="tab" aria-controls="image-2"> <img src="assets/images/shop/shop-2.png" alt="image"> </a> </li>
            <li class="nav-item"> <a class="nav-link" id="image-3-tab" data-bs-toggle="tab" href="#image-3" role="tab" aria-controls="image-3"> <img src="assets/images/shop/shop-3.png" alt="image"> </a> </li>
            <li class="nav-item"> <a class="nav-link" id="image-4-tab" data-bs-toggle="tab" href="#image-4" role="tab" aria-controls="image-4"> <img src="assets/images/shop/shop-4.png" alt="image"> </a> </li>
         </ul>
      </div>
      <div class="col-lg-9">
         <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="image-1" role="tabpanel"> <img src="assets/images/shop/shop-1.png" alt="image"> </div>
            <div class="tab-pane fade" id="image-2" role="tabpanel"> <img src="assets/images/shop/shop-2.png" alt="image"> </div>
            <div class="tab-pane fade" id="image-3" role="tabpanel"> <img src="assets/images/shop/shop-3.png" alt="image"> </div>
            <div class="tab-pane fade" id="image-4" role="tabpanel"> <img src="assets/images/shop/shop-4.png" alt="image"> </div>
         </div>
      </div>
   </div>
</div>

Step 2: CSS Code:

.product-image-tabs {
     .nav {
         border: none;
         .nav-item {
             border: none;
             margin-bottom: 15px;
             &:last-child {
                 margin-bottom: 0;
            }
             .nav-link {
                 border: none;
                 &.active {
                     background-color: transparent;
                }
            }
        }
    }
     .tab-content {
         .tab-pane {
             text-align: center;
        }
    }
}