Displaying images with their title in a for statement in an image slideshow

[mostwanted]

I came across a that displays all the images in a db in a form of slide show. Every-time the user clicks a number a corresponding image appears. The issue is that only the first image appears its title, every other image that follows displays without its title but i need the titles to tell users what they are looking at, I feel I am missing something in the view I just cant put my finger on it!

THE VIEW

<script type="text/javascript"><!--
var last_image={{=len(images)}};
var curr_image=0;
function show_image(id,v){
  var id2=id+'_title';
  curr_image=v;
  {{for i in range(len(images)):}}
  if(v=={{=i}}) {
  document.getElementById(id2).innerHTML='{{images[i].title}}'
  document.getElementById(id).src='{{=URL('download',args=[images[i].file])}}'
  }
  {{pass}}
}
function next_image(id) {
  curr_image=(curr_image+1);
  if(curr_image==last_image) curr_image=0;
  show_image(id,curr_image);
}
//--></script>

    <div class="row">
<div id="main">
  <div id="gallery">
    <h1>{{=title}}</h1>
    <div id="navigation_content">
      <ul class="navigation">
        <li><a onclick="show_image('the_image',0);">&laquo;</a></li>
        {{for i in range(len(images)):}}
        <li><a onclick="show_image('the_image',{{=i}});">{{=i+1}}</a></li>
        {{pass}}
        <li><a onclick="show_image('the_image',last_image-1);">&raquo;</a></li>
      </ul>
    <div class="clear">&nbsp;</div>
    </div>
    <div id="image">
      <h2 id="the_image_title">{{=images[0].title}}</h2><br/>
      <img src="{{=URL('download',args=[images[0].file])}}"
        id="the_image" name="image" width="700" height="489"
        onclick="next_image('the_image');"/>
    </div>
  </div>
</div>
    </div>

Regards;

Mostwanted

[Annet]

Have a look at the html of the Bootstrap 4.5 carousel

https://getbootstrap.com/docs/4.5/components/carousel/

maybe that points you in the right direction.

Kind regards,

Annet