загрузочная карусель не работает с маршрутизацией колб

Question

У меня есть этот HTML-код в index.html:

{% block header %}
<header>
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <!-- Slide One - Set the background image for this slide in the line below -->
      <div class="carousel-item active" style="background-image: url('http://placekitten.com/1900/1080')">
        <div class="carousel-caption d-none d-md-block">
          <h3>First Slide</h3>
          <p>This is a description for the first slide.</p>
        </div>
      </div>
      <!-- Slide Two - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('http://placekitten.com/1900/1080')">
        <div class="carousel-caption d-none d-md-block">
          <h3>Second Slide</h3>
          <p>This is a description for the second slide.</p>
        </div>
      </div>
      <!-- Slide Three - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('http://placekitten.com/1900/1080')">
        <div class="carousel-caption d-none d-md-block">
          <h3>Third Slide</h3>
          <p>This is a description for the third slide.</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</header>
{% endblock %}

И это мой маршрутизатор фляги:

@app.route('/')
@app.route('/index')
def index():
    return render_template('index.html')

Проблема в том, когда я нажимаю на следующую кнопку на каруселиэто не будет работать, и показанный URL:

http://127.0.0.1:5000/index#carouselExampleIndicators

Я знаю, что проблема очевидна, но я не мог найти решение.Я пытался сохранить index.html независимым ... или пытался отправить идентификатор карусели обратно на маршрутизатор и перейти оттуда ... но все мои попытки бесполезны.Я использую бутстрап 4.1.3 и колбу 1.0.2.

Answer 1

Похоже, что на странице index.html отсутствует ссылка на загрузочную версию.Вы можете получить bootstrap.css и bootstrap.min.js из https://getbootstrap.com/docs/4.3/getting-started/download/ и сохранить папки css и js в папке с шаблонами фляги (где находится index.html).

Добавление <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> после {% block header %} и <script src="js/bootstrap.min.js"></script> до {% endblock %} должно позволить корректно работать скольжению изображений в карусели

Например:

{% block header %}
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <header>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    .... YOUR HTML CODE FOR CAROUSEL GOES HERE ....
    </div>
  </header>
<script src="js/bootstrap.min.js"></script>
{% endblock %}

Answer 2

Вот полное решение для вашей карусели, работающей в версии 3.1.0:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <!-- Slide One - Set the background image for this slide in the line below -->
      <div class="item active">
      <img src="http://placekitten.com/1900/1080" alt="">
        <div class="carousel-caption d-none d-md-block">
          <h3>First Slide</h3>
          <p>This is a description for the first slide.</p>
        </div>
      </div>
      <!-- Slide Two - Set the background image for this slide in the line below -->
      <div class="item">
      <img src="http://placekitten.com/1900/1080" alt="">
        <div class="carousel-caption d-none d-md-block">
          <h3>Second Slide</h3>
          <p>This is a description for the second slide.</p>
        </div>
      </div>
      <!-- Slide Three - Set the background image for this slide in the line below -->
      <div class="item">
      <img src="http://placekitten.com/1900/1080" alt="">
        <div class="carousel-caption d-none d-md-block">
          <h3>Third Slide</h3>
          <p>This is a description for the third slide.</p>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

Кроме того, обязательно добавьте импорт и загрузите расширение в ваше приложение фляги:

app = Flask(__name__)
Bootstrap(app) # Just add this below above line in your code.