Bootstrap Caroussel in SimplyEdit

carousel.complete.html

<main data-simply-list=”sections” data-simply-sortable>
  <template rel=”carousel”></template>
</main>

<template id=”carousel” data-simply-template=”carousel”>
  <div id=”carouselExampleControls” class=”carousel slide” data-ride=”carousel”
    data-simply-transformer=”uniqueId” data-simply-field=”carousel” 
    data-simply-content=”attributes” data-simply-attributes=”id”
  >
    <ol class=”carousel-indicators” data-simply-list=”slides”>
      <template>
        <li data-target=”#carouselExampleIndicators” data-slide-to=”0" 
          data-simply-field=”index”
          data-simply-content=”attributes”
          data-simply-attributes=”data-slide-to”
        ></li>
      </template>
    </ol>
    <div class=”carousel-inner” data-simply-list=”slides” data-simply-sortable>
    <div class=”carousel-inner” data-simply-list=”slides” data-simply-sortable>
      <template>
        <div class=”carousel-item”>
          <img class=”d-block w-100" src=”…” alt=”First slide” data-simply-field=”image”>
          <div class=”carousel-caption d-none d-md-block”>
            <h5 data-simply-field=”title”>…</h5>
            <p data-simply-field=”caption”>…</p>
          </div>
        </div>
      </template>
    </div>
    <a class=”carousel-control-prev” href=”#carouselExampleControls” role=”button” data-slide=”prev” 
       data-simply-field=”carousel” data-simply-content=”fixed”
    >
      <span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
      <span class=”sr-only”>Previous</span>
    </a>
    <a class=”carousel-control-next” href=”#carouselExampleControls” role=”button” data-slide=”next”
       data-simply-field=”carousel” data-simply-content=”fixed”
    >
      <span class=”carousel-control-next-icon” aria-hidden=”true”></span>
      <span class=”sr-only”>Next</span>
    </a>
  </div>
</template>

carousel.ids.html

<div class=”carousel slide” data-ride=”carousel” 
  data-simply-transformer=”uniqueId” data-simply-field=”carousel” 
  data-simply-content=”attributes” data-simply-attributes=”id”
>
  ...
  <a class=”carousel-control-prev” href=”#carouselExampleControls” role=”button” data-slide=”prev” 
     data-simply-field=”carousel” data-simply-content=”fixed”
  >
    <span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
    <span class=”sr-only”>Previous</span>
  </a>
  <a class=”carousel-control-next” href=”#carouselExampleControls” role=”button” data-slide=”next”
     data-simply-field=”carousel” data-simply-content=”fixed”
  >
    <span class=”carousel-control-next-icon” aria-hidden=”true”></span>
    <span class=”sr-only”>Next</span>
  </a>
</div>

carousel.ids.js

function generateUniqueId() {
  var id = Math.random().toString(36).replace(/[^a-z]+/g, ‘’).substr(2, 10);
  if (document.getElementById(id)) {
    return generateUniqueId();
  } else {
    return id;
  }
}

if (!editor.transformers) { editor.transformers = {}; }

editor.transformers.uniqueId = {
  render : function(data) {
    if (!data.id) {
      data.id = generateUniqueId();
      data.href = ‘#’+data.id;
    }
    return data;
  }
};

carousel.indicators.html

  <ol class=”carousel-indicators” data-simply-list=”slides”>
    <template>
      <li data-target=”#carouselExampleIndicators” data-slide-to=”0" 
        data-simply-field=”index”
        data-simply-content=”attributes”
        data-simply-attributes=”data-slide-to”
      ></li>
    </template>
  </ol>

carousel.init1.js

document.querySelectorAll(‘.carousel-indicators li:first-child, .carousel-item:first-child’)
  .forEach(function(el) {
    el.classList.add(‘active’);
  }
);

carousel.init2.js

document.querySelector(‘#carouselExampleControls .carousel-inner’)
  .addEventListener(‘databind:elementresolved’, function(evt) {
    document.querySelectorAll(‘.carousel-indicators li:first-child, .carousel-item:first-child’)
      .forEach(function(el) {
        el.classList.add(‘active’);
      }
    );
  }
);

carousel.init3.js

document.querySelector(‘#carouselExampleControls .carousel-inner’)
  .addEventListener(‘databind:elementresolved’, function(evt) {
    var count = 0;
    document.querySelectorAll(‘.carousel-indicators li:first-child, .carousel-item:first-child’)
      .forEach(function(el) {
        el.classList.add(‘active’);
        editor.pageData.slides[count].index = { “data-slide-to”: count };
        count++;
      }
    );
  }
);

carousel.js

(function() {
  document.querySelector(‘#carouselExampleControls .carousel-inner’)
    .addEventListener(‘databind:elementresolved’, function(evt) {
      var count = 0;
      document.querySelectorAll(‘.carousel-indicators li:first-child, .carousel-item:first-child’)
        .forEach(function(el) {
          el.classList.add(‘active’);
          editor.pageData.slides[count].index = { “data-slide-to”: count };
          count++;
        }
      );
    }
  );

  function generateUniqueId() {
    var id = Math.random().toString(36).replace(/[^a-z]+/g, ‘’).substr(2, 10);
    if (document.getElementById(id)) {
      return generateUniqueId();
    } else {
      return id;
    }
  }

  if (!editor.transformers) { editor.transformers = {}; }

  editor.transformers.uniqueId = {
    render : function(data) {
      if (!data.id) {
        data.id = generateUniqueId();
        data.href = ‘#’+data.id;
      }
      return data;
    }
  };
})();

carousel.raw.html

<div id=”carouselExampleControls” class=”carousel slide” data-ride=”carousel”>
  <ol class=”carousel-indicators”>
    <li data-target=”#carouselExampleIndicators” data-slide-to=”0" class=”active”></li>
    <li data-target=”#carouselExampleIndicators” data-slide-to=”1"></li>
    <li data-target=”#carouselExampleIndicators” data-slide-to=”2"></li>
  </ol>
  <div class=”carousel-inner”>
    <div class=”carousel-item active”>
      <img class=”d-block w-100" src=”…” alt=”First slide”>
    </div>
    <div class=”carousel-item”>
      <img class=”d-block w-100" src=”…” alt=”Second slide”>
      <div class=”carousel-caption d-none d-md-block”>
        <h5>…</h5>
        <p>…</p>
      </div>
    </div>
    <div class=”carousel-item”>
      <img class=”d-block w-100" src=”…” alt=”Third slide”>
    </div>
  </div>
  <a class=”carousel-control-prev” href=”#carouselExampleControls” role=”button” data-slide=”prev”>
    <span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
    <span class=”sr-only”>Previous</span>
  </a>
  <a class=”carousel-control-next” href=”#carouselExampleControls” role=”button” data-slide=”next”>
    <span class=”carousel-control-next-icon” aria-hidden=”true”></span>
    <span class=”sr-only”>Next</span>
  </a>
</div>

carousel.slides.html

<div class=”carousel-inner” data-simply-list=”slides” data-simply-sortable>
  <template>
    <div class=”carousel-item active”>
      <img class=”d-block w-100" src=”…” alt=”First slide” data-simply-field=”image”>
      <div class=”carousel-caption d-none d-md-block”>
        <h5 data-simply-field=”title”>…</h5>
        <p data-simply-field=”caption”>…</p>
      </div>
    </div>
  </template>
</div>

caroussel.list1.html

<div id=”carouselExampleControls” class=”carousel slide” data-ride=”carousel”>
  <ol class=”carousel-indicators”>
    <li data-target=”#carouselExampleIndicators” data-slide-to=”0"></li>
    <li data-target=”#carouselExampleIndicators” data-slide-to=”1"></li>
    <li data-target=”#carouselExampleIndicators” data-slide-to=”2"></li>
  </ol>
  <div class=”carousel-inner” data-simply-list=”slides” data-simply-sortable>
    <template>
      <div class=”carousel-item active”>
        <img class=”d-block w-100" src=”…” alt=”First slide”>
        <div class=”carousel-caption d-none d-md-block”>
          <h5>…</h5>
          <p>…</p>
        </div>
      </div>
    </template>
  </div>
  <a class=”carousel-control-prev” href=”#carouselExampleControls” role=”button” data-slide=”prev”>
    <span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
    <span class=”sr-only”>Previous</span>
  </a>
  <a class=”carousel-control-next” href=”#carouselExampleControls” role=”button” data-slide=”next”>
    <span class=”carousel-control-next-icon” aria-hidden=”true”></span>
    <span class=”sr-only”>Next</span>
  </a>
</div>

caroussel.list2.html

<div id=”carouselExampleControls” class=”carousel slide” data-ride=”carousel”>
  <ol class=”carousel-indicators” data-simply-list=”slides”>
    <template>
      <li data-target=”#carouselExampleIndicators” data-slide-to=”0"></li>
    </template>
  </ol>
  <div class=”carousel-inner” data-simply-list=”slides” data-simply-sortable>
    <template>
      <div class=”carousel-item active”>
        <img class=”d-block w-100" src=”…” alt=”First slide”>
        <div class=”carousel-caption d-none d-md-block”>
          <h5>…</h5>
          <p>…</p>
        </div>
      </div>
    </template>
  </div>
  <a class=”carousel-control-prev” href=”#carouselExampleControls” role=”button” data-slide=”prev”>
    <span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
    <span class=”sr-only”>Previous</span>
  </a>
  <a class=”carousel-control-next” href=”#carouselExampleControls” role=”button” data-slide=”next”>
    <span class=”carousel-control-next-icon” aria-hidden=”true”></span>
    <span class=”sr-only”>Next</span>
  </a>
</div>

content-slices.html

<main data-simply-list=”sections” data-simply-sortable>
  <template rel=”carousel”></template>
</main>
<template id=”carousel” data-simply-template=”carousel”>
  <div id=”carouselExampleControls” class=”carousel slide” data-ride=”carousel”>
    …
  </div>
</template>