JSFiddle - React, Tailwind, and code Playground

by anatooly

HTML

<ul id="slides">
  <li class="slide showing">
    Slide 1
    <div class="btn-block">
      <a href="#" class="btn btn-no">
          No                                                                 
        </a>
      <a href="#" class="btn">
          Yes                                                               
        </a>
    </div>
  </li>
  <li class="slide">
    Slide 2
    <div class="btn-block">
      <a href="#" class="btn btn-no">
        No                                                                           
      </a>
      <a href="#" class="btn">
        Yes                                                                               
      </a>
    </div>
  </li>
  <li class="slide">Slide 3
    <div class="btn-block">
      <a href="#" class="btn btn-no">
              No                                                                           
            </a>
      <a href="#" class="btn">
              Yes                                                                               
            </a>
    </div>
  </li>
  <li class="slide">
    Slide 4
    <div class="btn-block">
      <a href="#" class="btn btn-no">
            No                                                                           
          </a>
      <a href="#" class="btn">
            Yes                                                                               
          </a>
    </div>
  </li>
  <li class="slide">
    Slide 5
    <div class="btn-block">
      <a href="https://www.google.com" class="btn btn-no">
        No                                                                           
      </a>
      <a href="https://www.google.com" class="btn">
        Yes                                                                               
      </a>
    </div>
  </li>
</ul>

CSS

/*
essential styles:
these make the slideshow work
*/

#slides {
  position: relative;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.slide {
  /*position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;*/
  display: none;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}

.showing {
  opacity: 1;
  display: block;
  z-index: 2;
}


/*
non-essential styles:
just for appearance; change whatever you want
*/

.slide {
  font-size: 40px;
  padding: 40px;
  box-sizing: border-box;
  background: #333;
  color: #fff;
}

.slide:nth-of-type(1) {
  background: red;
}

.slide:nth-of-type(2) {
  background: orange;
}

.slide:nth-of-type(3) {
  background: green;
}

.slide:nth-of-type(4) {
  background: blue;
}

.slide:nth-of-type(5) {
  background: purple;
}


/* btn block
-------------------- */

.btn-block {
  padding-top: 3rem;
  text-align: center;
}

.btn {
  display: inline-block;
  width: 38%;
  margin-bottom: 2rem;
  padding: 1.5rem 2rem;
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background-color: #ec567c;
  transition: all 0.2s linear;
}

.btn-block,
.btn-start {
  display: block;
  width: 100%;
}

.btn:hover {
  background-color: #f4104a;
}

.btn-no {
  background-color: #aaa;
}

.btn-no:hover {
  background-color: #ccc;
}

JavaScript

var $slides = document.querySelectorAll('.slide');
var $btns = document.querySelectorAll('.btn-no');
var currentSlide = 0;

function nextSlider() {
/*
  if (currentSlide >= $slides.length - 1) {
  	unbindAllEvents();
    return false;
  }
*/
  $slides[currentSlide].className = 'slide';
  ++currentSlide;
  $slides[currentSlide].className = 'slide showing';
}

function redirectUrl() {
  document.body.innerHTML = 'Redirect...';
}

function bindAllEvents() {
	var btnRedirect = $btns.length - 1;

  for (var i = 0; i < $btns.length - 1; i++) {
    $btns[i].addEventListener('click', function() {
      nextSlider();
      return false;
    }, false);
  }

  // Without this event use a tag redirect of last .btn-no buttons
  $btns[btnRedirect].addEventListener('click', function() {
      redirectUrl();
      return false;
   }, false);
}
/*
function unbindAllEvents() {
  for (var i = 0; i < $btns.length; i++) {
    $btns[i].removeEventListener('click', null, false);
  }
}
*/
bindAllEvents();