<div class="{% if css %}{{ css }}{% else %}row align-items-center mt-5 mb-5{% endif %}{% if onlymobile %} d-block d-md-none{% endif %}">

  <div class="col-12">

    <div class="slideshow-container">

      {{ body | markdown | safe }}

      <a class="prev" onclick="plusSlides(-1, '{{ slideName }}', '{{ dotName }}')">&#10094;</a>
      <a class="next" onclick="plusSlides(1, '{{ slideName }}', '{{ dotName }}')">&#10095;</a>
    </div>

    <div class="slideshow-dots" style="text-align:center">
      <span class="dot {{ dotName }}" onclick="currentSlide(1, '{{ slideName }}', '{{ dotName }}')"></span>
      <span class="dot {{ dotName }}" onclick="currentSlide(2, '{{ slideName }}', '{{ dotName }}')"></span>
      <span class="dot {{ dotName }}" onclick="currentSlide(3, '{{ slideName }}', '{{ dotName }}')"></span>
      <span class="dot {{ dotName }}" onclick="currentSlide(4, '{{ slideName }}', '{{ dotName }}')"></span>
      <span class="dot {{ dotName }}" onclick="currentSlide(5, '{{ slideName }}', '{{ dotName }}')"></span>
    </div>

  </div>

</div>