{% if pattern_lab %}
{#  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">#}
{#  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">#}
{% endif %}

{% if carousel_type == 'banner' %}
  <div class="uw-carousel uw-carousel__{{ carousel_type }} uw-carousel__{{ carousel_type }}-{{ banners.style }} {{ banners.pl_body_faculty }} " data-uuid="{{ banners.uuid }}" data-autoplay="{{ banners.autoplay }}" data-slide-speed="{{ banners.slide_speed }}" style="--banner-transition-speed: {{banners.transition_speed}}ms">
{% else %}
  <div class="uw-carousel">
{% endif %}
  <div class="carousel">
    {% block content %}
      <div class="item">Item #1</div>
      <div class="item">Item #2</div>
      <div class="item">Item #3</div>
      <div class="item">Item #4</div>
      <div class="item">Item #5</div>
    {% endblock %}
  </div>
  {% if carousel_type  == 'banner' %}
    <div class="uw-nav__banner-control-wrap">
      <button href="#uw-pause" id="uw-play"  class="uw-nav__banner-control uw-play" title="play">
        <span class="element-invisible off-screen">Play banner slideshow</span>
        {% include '@components/icon/icon.twig' with {
          'name': 'banner_play',
        } %}
      </button>
      <button href="#uw-play" id="uw-pause" class="uw-nav__banner-control uw-pause" title="pause">
        <span class="element-invisible off-screen">Pause banner slideshow</span>
        {% include '@components/icon/icon.twig' with {
          'name': 'banner_pause',
        } %}
      </button>
    </div>
  {% endif %}
</div>