{% extends "localhost/template.html" %}
{% block body %}
<section class="container">
    <div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-9">
      <div id="carouselExampleCaptions" class="carousel slide">
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
          </div>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="/static/img/localhost/slider/s1-800-600.jpg" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5>Метка первого слайда</h5>
                <p>Некоторый репрезентативный заполнитель для первого слайда.</p>
              </div>
            </div>
            <div class="carousel-item">
              <img src=".." class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5>Метка второго слайда</h5>
                <p>Некоторый репрезентативный заполнитель для второго слайда.</p>
              </div>
            </div>
            <div class="carousel-item">
              <img src="..." class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5>Метка третьего слайда</h5>
                <p>Некоторый репрезентативный заполнитель для третьего слайда.</p>
              </div>
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Предыдущий</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Следующий</span>
          </button>
        </div>
  
  
      </div>
      </div>
  </section>
  

{% endblock %}