JSFiddle - React, Tailwind, and code Playground

by Markerleffe

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="caughtOnCamera">

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol id="carousel-indicators" class="carousel-indicators">
    </ol>

    <div id="carousel-inner" class="carousel-inner">
    </div>

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

  </div>
  <div id="popover-content" class="hide">
    <form action="#" onSubmit="submitCaughtForm();return false;" id="caughtOnCameraForm" method="POST">
      <div>
        <input type="hidden" id="assetId" name="assetId" value="">
        <label for="iSurname">Your Surname:</label>
        <input type="text" name="iSurname" id="iSurname" class="form-control input-md">
        <label for="iFirstNames">Your First Names:</label>
        <input type="text" name="iFirstNames" id="iFirstNames" class="form-control input-md">
        <label for="sSurname">Suspect Surname:</label>
        <input type="text" name="sSurname" id="sSurname" class="form-control input-md">
        <label for="sFirstNames">Suspect First Names:</label>
        <input type="text" name="sFirstNames" id="sFirstNames" class="form-control input-md">
        <input id="saveForm" class="button-text" type="submit" name="submit" value="Submit" />
      </div>
    </form>
  </div>
</div>

CSS

#myCarousel {
  width: 500px;
  height: 300px;
  overflow: hidden;
  background-image: linear-gradient(white, grey);
  display: flex;
  flex-direction: column;
}

#myCarousel img {
  border-radius: 2px;
  display: block;
  margin: 0 auto;
  height: 300px;
  margin-bottom: 0px;
}

#myCarousel button {
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 6px 6px;
  margin: 0;
  cursor: pointer;
  border: 1px solid #bbb;
  overflow: visible;
  font: bold 13px arial, helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  color: #555;
  background-color: #ddd;
}

JavaScript

/* $("#myCarousel").carousel({interval: 10000, pause: "hover"}); */

initCarousel();

function initCarousel() {
  $.ajax({
    type: 'GET',
    url: "https://localhost:8443/Dytask/CaughtOnCamera/fetchCaughtOnCamera",
    success: function(json) {
      addSlides(json);
    }
  })
}

function addSlides(ids) {
  var json = JSON.parse(ids);
  var funcs = [];
  for (var i = 0; i < json.length; i++) {
    var indicators = $("#carousel-indicators");
    var inner = $("#carousel-inner")
    var items = indicators.children().length;
    var li = document.createElement("li");
    var innerDiv = document.createElement("div");
    var img = document.createElement("img");
    var captionDiv = document.createElement("div");
    var btn = document.createElement("button");
    captionDiv.setAttribute("class", "carousel-caption");
    funcs[i] = createFunction(json[i]);
    btn.onclick = funcs[i];
    btn.innerHTML = "Identify";
    btn.setAttribute("data-toggle", "popover");
    btn.setAttribute("data-container", "body")
    if (items === 0) {
      li.setAttribute("data-target", "#myCarousel");
      li.setAttribute("data-slide-to", items);
      li.setAttribute("class", "active");
      innerDiv.setAttribute("class", "item active");
      img.src = "https://localhost:8443/Dytask/CaughtOnCamera/requestImage?id=" + json[i];
    } else {
      li.setAttribute("data-target", "#myCarousel");
      li.setAttribute("data-slide-to", items);
      innerDiv.setAttribute("class", "item");
      img.src = "https://localhost:8443/Dytask/CaughtOnCamera/requestImage?id=" + json[i];
    }
    indicators.append(li);
    innerDiv.appendChild(img);
    captionDiv.appendChild(btn);
    innerDiv.appendChild(captionDiv);
    inner.append(innerDiv);
    img.setAttribute("ondragstart", "return false");
    img.setAttribute("oncontextmenu", "return false");
  }
  $("#myCarousel").carousel({
    interval: 10000,
    pause: "hover"
  });
}

function createFunction(id) {
  return function() {
   ...