Is there a way to add new text at the bottom of each box in this code?
I specifically want the new text to show underneath the boxes, not inside them. Each box should have different text associated with it. When you navigate using the left or right arrows, the new text should be displayed along with the corresponding box. Thank you for your help!
<!-- JavaScript functions -->
function shiftLeft() {
// function logic...
}
function shiftRight() {
// function logic...
}
<!-- CSS Styles -->
// CSS styles go here...<head>
<title>3d-carousel</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="button" onclick="shiftLeft()"><img src="left_arrow.png" alt=""></div>
<div class="cards-wrapper">
<ul class="cards__container">
<li class="box" style="background-color:red">box 1</li>
<li class="box">box 2</li>
<li class="box">box 3</li>
<li class="box">box 4</li>
<li class="box">box 5</li>
<li class="box box--hide">box 6</li>
<li class="box box--hide">box 7</li>
</ul>
<div class="card__text-content">
<h3 class="card__title">The Famous Five</h3>
<div class="card__summary">The Famous Five is a series of children's adventure novels written by English author Enid Blyton. The first book, Five on a Treasure Island, was published in 1942.</div>
</div>
</div>
<div class="button" onclick="shiftRight()"><img src="right_arrow.png" alt=""></div>
</div>
<script src='js/index.js'></script>
</body>