I need to highlight text based on slide image - html

Question

I am currently trying to create some kind of movie info page like what you see in cinemas where I grab images and titles from another source.
What my code should do is when the pictures from image slide change, it should highlight the corresponding title to show what movie it is but I am not sure how to properly connect between the images and the texts.
Any help would be appreciated thanks.
html:
<table align="center">
<tr>
<td>
<!-- slide -->
<div class="slide" style="width: 550px; height: 620px" align="center">
<ul class="home_ul">
<c:forEach var="img" items="${moviedata }" varStatus="no">
<a href="../movielist/MDetail?mid=${img.mid }"><li class="home_li"><img src="../m_img/movie/${img.imgurl}"
alt="" width="500px" height="600px" name="color${no.index }" /></li></a>
</c:forEach>
</ul>
</div>
</td>
<td>
<!-- movielist-->
<div>
<ul class = "mlist">
<c:forEach var="rank" items="${moviedata }" varStatus="no">
<li>
${no.index + 1 }. ${rank.name }
</li>
</c:forEach>
</ul>
</div>
</td>
</tr>
</table>
html Result :
<table align="center">
<tr>
<td>
<!-- slide -->
<div class="slide" style="width: 550px; height: 620px" align="center">
<ul class="home_ul">
<a href="../movielist/MDetail?mid=11"><li class="home_li"><img src="../m_img/movie/82019_1000.jpg"
alt="" width="500px" height="600px" name="color1" /></li></a>
<a href="../movielist/MDetail?mid=25"><li class="home_li"><img src="../m_img/movie/82060_1000.jpg"
alt="" width="500px" height="600px" name="color2" /></li></a>
<a href="../movielist/MDetail?mid=1"><li class="home_li"><img src="../m_img/movie/82078_1000.jpg"
alt="" width="500px" height="600px" name="color3" /></li></a>
<a href="../movielist/MDetail?mid=5"><li class="home_li"><img src="../m_img/movie/82133_1000.jpg"
alt="" width="500px" height="600px" name="color4" /></li></a>
<a href="../movielist/MDetail?mid=23"><li class="home_li"><img src="../m_img/movie/82093_1000.jpg"
alt="" width="500px" height="600px" name="color5" /></li></a>
<a href="../movielist/MDetail?mid=4"><li class="home_li"><img src="../m_img/movie/81905_1000.jpg"
alt="" width="500px" height="600px" name="color6" /></li></a>
<a href="../movielist/MDetail?mid=6"><li class="home_li"><img src="../m_img/movie/82190_1000.jpg"
alt="" width="500px" height="600px" name="color7" /></li></a>
<a href="../movielist/MDetail?mid=3"><li class="home_li"><img src="../m_img/movie/82224_1000.jpg"
alt="" width="500px" height="600px" name="color8" /></li></a>
<a href="../movielist/MDetail?mid=7"><li class="home_li"><img src="../m_img/movie/82129_1000.jpg"
alt="" width="500px" height="600px" name="color9" /></li></a>
</ul>
</div>
</td>
<td>
<!-- movielist -->
<div>
<ul class = "mlist">
<li>
1. Movie Name 1
</li>
<li>
2. Movie Name 2
</li>
<li>
3. Movie Name 3
</li>
<li>
4. Movie Name 4
</li>
<li>
5. Movie Name 5
</li>
<li>
6. Movie Name 6
</li>
<li>
7. Movie Name 7
</li>
<li>
8. Movie Name 8
</li>
<li>
9. Movie Name 9
</li>
<li>
10. Movie Name 10
</li>
</ul>
</div>
</td>
</tr>
</table>
CSS:
<style>
.mlist{
list-style:none;
display:flex;
align-content:flex-start;
flex-direction: column;
flex-wrap: wrap;
width: 250px;
text-align: left;
}
.mlist li {
display:inline-block;
border:1px solid black;
border-top: 1px solid black;
width:260px;
height:50px;
margin:3px 0 0;
}
.mlist li:hover {
border:1px solid red; height:50px;
}
</style>
JavaScript:
const all = ele => document.querySelectorAll(ele)
const one = ele => document.querySelector(ele)
const slide = _ => {
const wrap = one('.slide')
const target = wrap.children[0]
const len = target.children.length
target.style.cssText = width:calc(100% * ${len});display:flex;transition:1s
Array.from(target.children)
.forEach(ele => ele.style.cssText = width:calc(100% / ${len});)
let pos = 0
setInterval(() => {
pos = (pos + 1) % len
target.style.marginLeft = ${-pos * 100}% }, 3000)
}
window.onload = function () {
slide()
}

Answer 1

I suggest you keep track of your slide with variables.
When you navigate you could use these 2 variables to hold the ID of the element you want to highlight now and the element on which you want to remove the highlight. And run this script every time you change the slide.
In your case i believe your using positions. so apply the style to that new position and remove it from the old position.
Now for what is linking the text to the image depends on what your doing. The could share a same position value or they could share a container element. And if you plan on using you position with the ID attribute, remember that an id attribute can not start with a number. So I usualy concatenate a string with a numeric value.
"myElementId_"+ pos
Result in myElementId_1 which is valid html
Now just add style to this element and remove it from last.