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;
        }
    }
}

Step 3: Example Gallery:

Product Gallery

That’s it! Happy coding. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *