Eu tenho um slide do bootstrap que gostaria de adicionar 2 linhas e cada linha teria 3 elementos. Depois para ver o restante dos elementos, a pessoa teria que clicar na seta e passar para o lado. O meu problema é: eu não consigo fazer ele ter 2 linhas, o slide fica com todos os elementos em uma só linha. E também não consigo adicionar a seta para passar para o lado, visto que todos os elementos já estão em uma mesma linha.
O resultado final deveria ser assim:
com 2 linhas e 3 elementos em cada linha. o leitor teria que clicar na seta para ver o restante dos elementos
Abaixo está o código que estou usando e que está com o problema.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="4"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="5"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
</ul>
<div class="controls-top">
<a class="btn-floating" href="#myCarousel" data-slide="prev"><i
class="fas fa-chevron-left"></i></a>
<a class="btn-floating" href="#myCarousel" data-slide="next"><i
class="fas fa-chevron-right"></i></a>
</div>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x400/cccccc/ffffff" />
</div>
<div class="item">
<img src="http://placehold.it/1200x400/999999/cccccc">
</div>
<div class="item">
<img src="http://placehold.it/1200x400/dddddd/333333">
</div>
<div class="item">
<img src="http://placehold.it/1200x400/dddddd/333333">
</div>
<div class="item">
<img src="http://placehold.it/1200x400/dddddd/333333">
</div>
<div class="item">
<img src="http://placehold.it/1200x400/dddddd/333333">
</div>
</div>
</div>
</body>
</html>