For your website categories, you can use photos instead of category titles. It is as if we have three columns, each of which represents a category. These categories are introduced with the help of photos. Clicking on each category opens a pop-up with a slider inside, and other slides can be viewed using the arrows on the left and right of the slider.


HTML
<!-- This script got from www.devanswer.com  -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <h1>Bootstrap 3 lightbox hidden gallery using modal</h1>
    <hr>
    <div class="row">
      <div class="col-12 col-md-4 col-sm-6">
        <a title="Image 1" href="#"> 
          <img class="thumbnail img-responsive" id="image-1" src="http://www.devanswer.com/img/1-slider.jpg">
        </a>
      </div>
      <div class="col-12 col-md-4 col-sm-6">
        <a title="Image 2" href="#"> 
          <img class="thumbnail img-responsive" id="image-2" src="http://www.devanswer.com/img/2-slider.jpg">
        </a>
      </div>
      <div class="col-12 col-md-4 col-sm-6">
        <a title="Image 3" href="#"> 
          <img class="thumbnail img-responsive" id="image-3" src="http://www.devanswer.com/img/3-slider.jpg">
        </a>
      </div>
    </div>
    <hr>
  </div>
</div>
<div class="hidden" id="img-repo">
  <!-- #image-1 -->
  <div class="item" id="image-1">
    <img class="thumbnail img-responsive" title="Image 11" src="http://www.devanswer.com/img/1-1-slider.jpg">
  </div>
  <div class="item" id="image-1">
    <img class="thumbnail img-responsive" title="Image 12" src="http://www.devanswer.com/img/1-2-slider.jpg">
  </div>
  <!-- #image-2 -->
  <div class="item" id="image-2">
    <img class="thumbnail img-responsive" title="Image 21" src="http://www.devanswer.com/img/2-1-slider.jpg">
  </div>
  <div class="item" id="image-2">
    <img class="thumbnail img-responsive" title="Image 21" src="http://www.devanswer.com/img/2-2-slider.jpg">
  </div>
  <!-- #image-3-->
  <div class="item" id="image-3">
    <img class="thumbnail img-responsive" title="Image 31" src="http://www.devanswer.com/img/3-1-slider-2.jpg">
  </div>
  <div class="item" id="image-3">
    <img class="thumbnail img-responsive" title="Image 32" src="http://www.devanswer.com/img/3-2-slider-1.jpg">
  </div>
</div>
<div class="modal" id="modal-gallery" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">×</button>
        <h3 class="modal-title"></h3>
      </div>
      <div class="modal-body">
        <div id="modal-carousel" class="carousel">
          <div class="carousel-inner">           
          </div>
          <a class="carousel-control left" href="#modal-carousel" data-slide="prev">
            <i class="glyphicon glyphicon-chevron-left"></i>
          </a>
          <a class="carousel-control right" href="#modal-carousel" data-slide="next">
            <i class="glyphicon glyphicon-chevron-right"></i>
          </a>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com ">Developers Answer</a></div>
                        

CSS
.thumbnail {
  margin-bottom:6px;
}
img.thumbnail.img-responsive {
  margin: 0 auto;
}
.carousel-control.left,.carousel-control.right{
  background-image:none;
  margin-top:10%;
  width:5%;
}
Javascript
$(document).ready(function() {
   /* activate the carousel */
  $("#modal-carousel").carousel({interval:false});
   /* change modal title when slide changes */
  $("#modal-carousel").on("slid.bs.carousel",       function () {
    $(".modal-title").html($(this).find(".active img").attr("title"));
  });
  /* when clicking a thumbnail */
  $(".row .thumbnail").click(function(){
    var content = $(".carousel-inner");
    var title = $(".modal-title");
    content.empty();  
    title.empty();
    var id = this.id;  
    var repo = $("#img-repo .item");
    var repoCopy = repo.filter("#" + id).clone();
    var active = repoCopy.first();
    active.addClass("active");
    title.html(active.find("img").attr("title"));
    content.append(repoCopy);
    // show the modal
    $("#modal-gallery").modal("show");
  });
});