Trying to make my own carousel that will have multiple images per slide like this website https://www.thehoarde.com/

As the question states I'm build my own carousel without 3rd party plugins using the above web address as a templateish for what I want my to eventually do. I'm using Bootstrap 3 for the framework and this is what I have so far:

<div class="wrapper text-center"> <div class="col-lg-4 col-md-4"> <div class="col-lg-6 col-md-6 col-xs-12" style="padding: 5px"> <a href="#" style="width: 100%"> <img width="100%" class="img2" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAA‌​EAAAICTAEAOw==" alt="img2" style="background-image: url('img/2.jpg'); background-position: center center; background-size: cover"></a> </div> <div class="col-lg-6 col-md-6 col-xs-4" style="padding: 5px"> <a href="#" style="width: 100%"><img width="100%" class="img2" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAA‌​EAAAICTAEAOw==" alt="img2" style="background-image: url('img/2.jpg'); background-position: center center; background-size: cover"></a> </div> <div class="col-lg-6 col-md-6 col-xs-4" style="padding: 5px"> <a href="#" style="width: 100%"><img width="100%" class="img3" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAA‌​EAAAICTAEAOw==" alt="img3" style="background-image: url('img/3.jpg'); background-position: center center; background-size: cover"></a> </div> <div class="col-lg-6 col-md-6 col-xs-4" style="padding: 5px"> <a href="#" style="width: 100%"><img width="100%" class="img4" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAA‌​EAAAICTAEAOw==" alt="img4" style="background-image: url('img/4.jpg'); background-position: center center; background-size: cover"></a> </div> </div> <div class="col-lg-4 col-md-4"> <div class="col-lg-12 col-xs-12" style="padding:5px"> <a href="#" style="width: 100%"> <img width="100%" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAA‌​EAAAICTAEAOw==" alt="img1" style="background-image: url('img/5.jpg'); background-position: center center; background-size: cover"> </a> </div> </div> <div class="col-lg-4 col-md-4"> <div class="col-lg-6 col-md-6 col-xs-4" style="padding: 5px"> <a href="#" style="width: 100%"><img width="100%" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAA‌​EAAAICTAEAOw==" alt="img1" style="background-image: url('img/6.jpg'); background-position: center center; background-size: cover"></a> </div> <div class="col-lg-6 col-md-6 col-xs-4" style="padding: 5px"> <a href="#" style="width: 100%"><img width="100%" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAA‌​EAAAICTAEAOw==" alt="img2" style="background-image: url('img/1.jpg'); background-position: center center; background-size: cover"></a> </div> <div class="col-lg-6 col-md-6 col-xs-4" style="padding: 5px"> <a href="#" style="width: 100%"><img width="100%" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAA‌​EAAAICTAEAOw==" alt="img3" style="background-image: url('img/3.jpg'); background-position: center center; background-size: cover"></a> </div> <div class="col-lg-6 col-md-6" style="padding: 5px"> <a href="#" style="width: 100%"><img width="100%" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAA‌​EAAAICTAEAOw==" alt="img4" style="background-image: url('img/4.jpg'); background-position: center center; background-size: cover"></a> </div> </div> </div>

Problem is I'm not quite sure where to start with JQuery to get this carousel effect working? Any help would be appreciated and so for the massive bit of code!