-1
I have a bootstrap slide that would like to add 2 lines and each row would have 3 elements. Then to see the rest of the elements, the person would have to click the arrow and pass to the side. My problem is: I can’t get it to have two lines, the slide gets all the elements in one line. And also I can’t add the arrow to move to the side, since all the elements are already in one line.
The end result should be like this:
with 2 lines and 3 elements in each line. the reader would have to click on the arrow to see the rest of the elements
Below is the code I am using and that is with the problem.
<!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>
I didn’t get that part "I can’t get it to have 2 lines, the slide gets all the elements in one line. " How should the end result be? And do not have the arrows pe vc simply did not put anything, or which element should be your arrow, Next and Previous?
– hugocsl
@hugocsl goodnight! First of all thank you for the answer. I updated the question and put an image of how the result should be. About the arrows, I also added but they don’t work. The arrows should work in the first comics and not in the big one
– samanta