Amazing Lightbox Slide bar using jQuery and Bootstrap

Design amazing light box slider using bootstrap 4 and jquery 3.3.1. You just enter your cursor on the image and your current image will replace the main image. 

simply you just download bootstrap4  and jquery 3.3.1 and link jquery in your project and just copy and paste this code.
Jquery link : https://code.jquery.com/jquery-3.3.1.min.js
BOOTSTRAP 4 CODE:
<div class="container-fluid jumbotron">
  <h1 class="text-center">Gallery </h1>
  <br />
  <img src="img/Gallery/post-single-2.jpg" class=" d-block mx-auto" id="main-img">
  <div style="padding: 5px 0px;">
  <div class="row">
  <div class="col-md-2">
  <img src="D:\HD Wallpapers\3d_game_forest-1920x1080.jpg" class="img-fluid mx-auto d-block img-thumbnail" />
  </div>
  <div class="col-md-2">
  <img src="D:\HD Wallpapers\3dabstract108-1440x900.jpg" class="img-fluid mx-auto d-block img-thumbnail"/>
  </div>
  <div class="col-md-2">
  <img src="D:\HD Wallpapers\1_92-1920x1080.jpg"class="img-fluid mx-auto d-block img-thumbnail"/>
  </div>
  <div class="col-md-2">
  <img src="D:\HD Wallpapers\1Aaoq8P.jpg"class="img-fluid mx-auto d-block img-thumbnail"/>
  </div>
  <div class="col-md-2">
  <img src="D:\HD Wallpapers\1_132-1920x1080.jpg"class="img-fluid mx-auto d-block img-thumbnail"/>
  </div>
  <div class="col-md-2">
  <img src="D:\HD Wallpapers\24.jpg"class="img-fluid mx-auto d-block img-thumbnail"/>
  </div>
  </div>
</div>

  </div>

JQUERY CODE:

$(".img-thumbnail").mouseenter(function(){
$("#main-img").attr("src",$(this).attr("src"));

});