Как изменить фолиевую карту в html

Я хочу использовать HTML-кнопку или слайдер для поочередного получения значений массива карт Folium, полученных из views.py.

<div id="maps" style="width:800px;height:800px;">
        <div id="map_on" style="width:800px; height:800px; display:inline;" >
          <div id="map_on_1h" style="width:800px; height:800px; display:inline;" >
            {{map.0|safe}}
          </div>
          <div id="map_on_2h" style="width:800px; height:800px; display:none;" >
            {{map.1|safe}}
          </div>
          <div id="map_on_3h" style="width:800px; height:800px; display:none;" >
            {{map.2|safe}}
          </div>
          <div id="map_on_4h" style="width:800px; height:800px; display:none;" >
            {{map.3|safe}}
          </div>
          <div id="map_on_5h" style="width:800px; height:800px; display:none;" >
            {{map.4|safe}}
          </div>
          <div id="map_on_6h" style="width:800px; height:800px; display:none;" >
            {{map.5|safe}}
          </div>
          <div id="map_on_7h" style="width:800px; height:800px; display:none;" >
            {{map.6|safe}}
          </div>
          <div id="map_on_8h" style="width:800px; height:800px; display:none;" >
            {{map.7|safe}}
          </div>
          <div id="map_on_9h" style="width:800px; height:800px; display:none;" >
            {{map.8|safe}}
          </div>
        </div>

map - массив фолиевых карт Этот код не кажется подходящим. когда я нажимаю на кнопку или меняю ползунок, я хочу изменить индекс массива

<div id="maps" style="width:800px;height:800px;">
        <div id="map_on" style="width:800px; height:800px; display:inline;" >
          <div id="map_on_1h" style="width:800px; height:800px; display:inline;" >
            {{map.0|safe}} <--map.index-->
          </div>
</div>

помогите мне

Вернуться на верх