Para contextualizar: estou construindo um app. Assim como no site do globo esporte na parte da tabela, cada rodada possui um botão para avançar ou retroceder a rodada atual, que são os placares dos jogos.
Meu objetivo: assim como no site , gostaria que o usuário que navegasse pela página pudesse clicar em nesses botões, avançando ou retrocedendo a rodada para exibir os resultado dos jogos.
Situação atual: Os botões são exibidos, você pode clicar em neles, porém os mesmo não funcionam, além disso, as rodadas e os placares estão sendo exibidas todas na mesmo local.
Estou usando um for loop para acessar as rodadas mas não estou conseguindo fazer de modo que funcione.
Qualquer ajuda será muito bem vinda!
Aqui está o meu código HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>
<body>
{% extends "base.html"%}
{% block app_content %}
<a class="btn btn-success" href="{{ url_for('jogos.create') }}">Adicionar Novo Jogo</a>
<br>
<br>
{% for rodada in jogos %}
<div class="swiper-container">
<ul class="list-group">
<div class="swiper-slide">RODADA {{ rodada }}
{% for jogo in jogos[rodada] %}
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ jogo.mandante.nome.upper()[0:3] }}
<img class="escudo-mini" src="{{jogo.mandante.escudo}}" width="30" height="30"> {{ jogo.gols_mandante }} x
{{ jogo.gols_visitante }}
<img class="escudo-mini" src="{{jogo.visitante.escudo}}" width="30" height="30">
{{ jogo.visitante.nome.upper()[0:3] }}
<a class="btn-deletar" href="{{ url_for('jogos.delete', id=jogo.id)}}">Deletar</a>
<a class="btn-editar" href="{{ url_for('jogos.update', id=jogo.id)}}">Editar</a>
</li>
</div>
{% endfor %}
</ul>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
{% endfor %}
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
{% endblock %}
</body>
</html>Abaixo vou postar a imagem de como está ficando a tela.
https://drive.google.com/file/d/1RfIUh7jo5ZTH5a13B8NR8qaGMPxMzbgY/view?usp=sharing
