JSFiddle - React, Tailwind, and code Playground

by sm1215

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
  <div class="container">
    <div class="row no-gutter">
      <div class="col-xs-3">
        <div id="slideshow1" class="slideshow">
          <img class="img-responsive bwt" src="">
        </div>
      </div>
      <div class="col-xs-3">
        <div class="box" style="height: 185px;">
          <h5>Have to make this  div the height of 3 + 4 because 3 and 4 will always be different height on different devices I have to set height of this at load.</h5></div>
        <div id="slideshow6" class="slideshow">
          <img class="img-responsive bwt" src="">
        </div>
      </div>
      <div class="col-xs-6">
        <div id="slideshow3" class="slideshow">
          <img class="img-responsive bwt" src="">
        </div>
      </div>
      <div class="col-xs-3">
        <div id="slideshow4" class="slideshow">
          <img class="img-responsive bwt" src="">
        </div>
        <div id="slideshow5" class="slideshow">
          <img class="img-responsive bwt" src="">
        </div>
      </div>
      <div class="col-xs-3">
        <div id="slideshow2" class="slideshow">
          <img class="img-responsive bwt" src="">
        </div>
      </div>
    </div>
  </div>
</body>

CSS

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";

JavaScript

/*$.getScript("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js", function() {
  alert("Script loaded but not necessarily executed.");
});*/

$(document).ready(function() {
  // Get number of slideshows
  var numSlideshows = $('.slideshow').length;

  // Set initial images
  for (var i = 0; i < numSlideshows; ++i) {
    // Gives 1 or 2
    var imageId = Math.floor(Math.random() * 2) + 1;

    // +1 since slideshow id starts at 1, not 0
    setImage(i + 1, imageId);
  }

  // This lets you have as many (or as few) images as you want per slideshow
  var availableImageIds = [
    [1, 2], // Slideshow 1
    [1, 2], // Slideshow 2
    [1, 2], // Slideshow 3
    [1, 2], // Slideshow 4
    [1, 2], // Slideshow 5
    [1, 2] // Slideshow 6
  ];

  window.setInterval(function() {
    var slideshowId = Math.floor(Math.random() * numSlideshows);

    // +1 since slideshow id starts at 1, not 0
    swapImage(slideshowId + 1, availableImageIds[slideshowId]);
  }, 2000);
  
  //call setHeight here, just once on page load
  setHeight('box', [3,4]);
  
});

//sets the height of an element equal to the combined total height of the specificed slideshow id's
function setHeight(elementClass, slideshowIdArray){
  var totalHeight = 0;
	for(var i = 0; i < slideshowIdArray.length; i++){
  	totalHeight += parseInt($('#slideshow'+slideshowIdArray[i]).height());
  }
  $('.'+elementClass).height(totalHeight);
}

function setImage(slideshowId, imageId) {
  var imageSrc = 'http://dezignsnow.com/dummies/' + slideshowId + '-' + imageId + '.jpg';
  $('#slideshow' + slideshowId + ' img').attr('src', imageSrc);
}

function swapImage(slideshowId, availableImageIds) {
  var currImageSrc = $('#slideshow' + slideshowId + ' img').attr('src');

  // Looks complicated but just think it through
  // 1: split on the '.'
  // 2: take what was on the left of the '.' and plsit on the '-'
  // 3: we want what was on the right of the '-'
  // This way it works no matter how many...