plugin_release: '>=1.4'
key: bs-carousel
name: $string.bscarousel_name
category: bootstrap
icon: fa fa-images
engine: ejs
template: >
  <div id="<%=ID%>" aria-roledescription="carousel" aria-label="$string.bscarousel_name" data-widget="bs-carousel" class="carousel slide" data-ride="carousel" data-bs-ride="carousel">
    <ol class="carousel-indicators">
      <% imgs.forEach((_, i) => { %>
        <li class="<%= i===0 ? 'active' : ''%>" role="button" aria-label="$string.bscarousel_slide <%=i+1%>" data-target="#<%=ID%>" data-slide-to="<%=i%>" data-bs-target="#<%=ID%>" data-bs-slide-to="<%=i%>">&nbsp;</li>
      <% }) %>
    </ol>

     <div class="carousel-inner">
      <% imgs.forEach((img, i) => { %>
        <div class="carousel-item<%= i===0 ?' active' : ''%>" role="group" aria-roledescription="slide" aria-label="<%=i+1%> of <%=imgs.length%>">
          <img src="<%=img.url%>" class="d-block w-100" alt="<%=img.title || ('image ' + (i+1))%>">
          <% if (usecaptions) { %>
          <div class="carousel-caption d-none d-md-block">
            <h5><%=img.title%></h5>
            <p>Lorem ipsum $string.bscarousel_slide <%=i+1%>.</p>
          </div>
          <% } %>
        </div>
      <% }) %>
    </div>

    <button class="carousel-control-prev" type="button" data-target="#<%=ID%>" data-slide="prev" data-bs-target="#<%=ID%>" data-bs-slide="prev" aria-label="Previous">
      <span class="carousel-control-prev-icon" aria-hidden="true">&nbsp;</span>
      <span class="sr-only">Previous</span>
    </button>

    <button class="carousel-control-next" type="button" data-target="#<%=ID%>" data-slide="next" data-bs-target="#<%=ID%>" data-bs-slide="next" aria-label="Next">
      <span class="carousel-control-next-icon" aria-hidden="true">&nbsp;</span>
      <span class="sr-only">Next</span>
    </button>
  </div>   
  <p><br></p>
selectors: div[data-widget="bs-carousel"]
parameters:
  - __ID__
  - name: usecaptions
    title: $string.bscarousel_usecaptions
    value: true
  - name: imgs
    title: $string.bscarousel_imgs
    type: repeatable
    item_selector: .carousel-item
    min: 2
    max: 10
    fields:
      - name: url
        title: URL
        type: image
        value: https://picsum.photos/300/200?random={{i}}
        bind: attr('src', 'img')
      - name: title
        title: $string.ibtime_title
        value: $string.bscarousel_slide {{i}}
author: Josep Mulet <pep.mulet@gmail.com>
version: 2.1.1