JSFiddle - React, Tailwind, and code Playground

by sudarpochong

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="menu">
  <li style="font-size:22px; margin-top:8px;">
    Diapositivas: 
    <span class="resta" style="cursor:pointer;"><span class="glyphicon glyphicon-chevron-left"></span></span>
    <span class="segundos">3s</span>
    <span class="suma" style="cursor:pointer;"><span class="glyphicon glyphicon-chevron-right"></span></span>
  </li>
</ul>

<div id="polaroid1" class="polaroid1">
  <div class="tooltip2 play" style="background-image: url('');"><span id="playpause" class="tooltiptext2">Play it</span></div>
  <div class="mySlides1 fade currentslide">
    <img class="photo1" src="https://farm4.staticflickr.com/3019/3093173181_45f659c492_n.jpg">
    <h3 class="date1">22-05-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="https://farm5.staticflickr.com/4546/24715632778_5fb8e6173f_n.jpg">
    <h3 class="date1">12-08-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="https://farm5.staticflickr.com/4499/37902464002_1d837ae871_n.jpg">
    <h3 class="date1">22-05-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="https://lorempixel.com/600/400/">
    <h3 class="date1">10-06-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="https://lorempixel.com/600/400/">
    <h3 class="date1">19-08-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="https://lorempixel.com/600/400/">
    <h3 class="date1">11-08-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="https://lorempixel.com/600/400/">
    <h3 class="date1">22-05-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img class="photo1" src="https://lorempixel.com/600/400/">
    <h3 class="date1">19-04-2017</h3>
  </div>
  <div class="mySlides1 fade">
    <img...

CSS

.menu {
  list-style: none;
  bottom: 8px;
  position: absolute;
  font-family: 'Covered By Your Grace', cursive;
  font-weight: 300;
  width: 300px;
}

.menu > li {}

.play {
  width: 59px;
  height: 52px;
  position: absolute;
  left: 5px;
  bottom: 5px;
  cursor: pointer;
  z-index: 10000;
}

.polaroid1 {
  box-shadow: 10px 10px 7px -7px rgba(0, 0, 0, 0.5);
  -webkit-backface-visibility: hidden;
  transform: rotate(-8deg);
  margin-bottom: 30px;
  width: 380px;
  height: 320px;
  background-color: rgba(255, 255, 255, 1.0);
  text-align: right;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 15px;
  top: 15px;
  left: 25px;
  position: relative;
}

.photo1 {
  width: 100%;
  height: 85%;
  position: relative;
  padding: 5px;
}

.date1 {
  margin: 0;
  padding-right: 10px;
  font-family: 'Covered By Your Grace', cursive;
  transform: rotate(-5deg);
  font-size: 28px;
}

.mySlides1 {
  display: none;
  width: 380px;
  height: 320px;
  position: absolute;
  top: 0px;
  left: 0px;
}

.currentslide {
  display: block;
}

.fade {
  opacity: 1;
}

JavaScript

$(document).ready(function() {
  var segundos = 3000;
  var stop = true;
  var slideInterval;
  
  function _startSlide() {
    stop = false;
    $('#playpause').text('Pause it');
    slideInterval = setInterval(swapSlides, segundos);
  }
  
  function _stopSlide() {
    stop = true;
    $('#playpause').text('Play it');
    clearInterval(slideInterval);
  }
  
  function _restartSlide() {
  	clearInterval(slideInterval);
    slideInterval = setInterval(swapSlides, segundos);
  }
  
	// Play and Pause
  $('.play').click(function() {
  
    if (stop == false) {
    	_stopSlide();
    } else {
      _startSlide();
    }
    
  });


  function swapSlides() {
  	
    console.log("swapSlides triggered", "current interval is ", segundos)
    //var cs = $('div.currentslide:first');
    var cs = $('#polaroid1').children('.currentslide:first');
    var ns = cs.next();
    if (ns.hasClass('mySlides1')) {
      cs.removeClass('currentslide');
      ns.addClass('currentslide');
    } else {
      ns = $('#polaroid1').children('div.mySlides1:first');
      cs.removeClass('currentslide');
      ns.addClass('currentslide');
    }
    
  }

	// Decrease
  $('.resta').click(function() {
    if (segundos > 1000) {
      segundos = segundos - 1000;
      var segundoss = (segundos / 1000);
      $('.segundos').text(" " + segundoss + "s ");
      
      console.log("interval changed to ", segundos);
      _restartSlide();
    }
  });

	// Increase
  $('.suma').click(function() {
    if (segundos >= 1000 && segundos < 15000) {
      segundos = segundos + 1000;
      var segundoss = (segundos / 1000);
      $('.segundos').text(" " + segundoss + "s ");
      
      console.log("interval changed to ", segundos);
      _restartSlide();
    }
  });

});