<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="divs"> <div class="panel">1</div> <div class="panel">2</div> <div class="panel">3</div> <div class="panel">4</div> <div class="panel">5</div> <div class="panel">6</div> <div class="panel">7</div> </div> <a id="prev">prev</a> <a id="next">next</a> </div> </div>

$(document).ready(function(){ $(".divs div").each(function(e) { if (e != 0) $(this).hide(); }); $("#next").click(function(){ if ($(".divs div:visible").next().length != 0) $(".divs div:visible").next().show().prev().hide(); else { $(".divs div:visible").hide(); $(".divs div:first").show(); } return false; }); $("#prev").click(function(){ if ($(".divs div:visible").prev().length != 0) $(".divs div:visible").prev().show().next().hide(); else { $(".divs div:visible").hide(); $(".divs div:last").show(); } return false; }); });