{% extends "base.html" %}
{% block content %}
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

  <!-- Indicators/dots -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="assets/images/slide-01.jpg" alt="View from the dock" class="d-block w-100">
      <div class="carousel-caption">
        <h3>Jean-Marie Family</h3>
        <p>View from the dock</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="assets/images/slide-02.jpg" alt="Sunset at 3 sisters" class="d-block w-100">
      <div class="carousel-caption">
        <h3>Jean-Marie Family</h3>
        <p>Sunset over the 3 sisters</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="assets/images/slide-03.jpg" alt="Purple sunset" class="d-block w-100">
      <div class="carousel-caption">
        <h3>Jean-Marie Family</h3>
        <p>Purple sunset</p>
      </div>
    </div>
    <!-- The slideshow/carousel -->


    <!-- Left and right controls/icons -->
    <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
      <span class="carousel-control-next-icon"></span>
    </button>
  </div>
  {% endblock content %}