JSFiddle - React, Tailwind, and code Playground

by Andres Abadia

HTML

<!--Modal-1-->
<section class="overlay overlay-1" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer 1</h2>
    ...
    <button type="button" class="close-overlay" data-modal="1">CLOSE LAYER</button>
  </div>
</section>
<!--Modal-1-->
<!--Modal-2-->
<section class="overlay overlay-2" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer 2</h2>
    ...
    <button type="button" class="close-overlay" data-modal="2">CLOSE LAYER</button>
  </div>
</section>
<!--Modal-2-->
<!--Modal-3-->
<section class="overlay overlay-3" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer 3</h2>
    ...
    <button type="button" class="close-overlay" data-modal="3">CLOSE LAYER</button>
  </div>
</section>
<!--Modal-3-->
<!--Modal-4-->
<section class="overlay overlay-4" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer 4</h2>
    ...
    <button type="button" class="close-overlay" data-modal="4">CLOSE LAYER</button>
  </div>
</section>
<!--Modal-4-->
<div class="container" style="max-width: 1400px; margin: 0 auto;">
  <div id="slider">
    <div class="dp-wrap">
      <div id="dp-slider">

        <div class="dp_item" data-class="1" data-position="1">
          <div class="dp-content">

            <h2>Slide 1</h2>
            <p> This is Slide 1 </p>
            <button type="button" class="open-overlay" data-modal="1">OPEN LAYER</button>
          </div>
          <div class="dp-img">
            <img class="img-fluid" src="https://placeimg.com/821/739/any" alt="Intro">
          </div>
        </div>

        <div class="dp_item" data-class="2" data-position="2">
          <div class="dp-content">

            <h2>Slide 2</h2>
            <p> This is Slide 2 </p>
            <button type="button" class="open-overlay" data-modal="2">OPEN LAYER</button>
          </div>
          <div class="dp-img">
            <img class="img-fluid" src="https://placeimg.com/821/738/any" alt="GYFN">
          </div>
        </div>

        <div class="dp_item"...

CSS

* {
  font-family: 'Lato', sans-serif;
}

.dp-wrap {
  margin: 0 auto;
  position: relative;
  perspective: 1000px;
  height: 100%;
}

.dp-slider {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

.dp-slider div {
  transform-style: preserve-3d;
}

.dp_item {
  display: block;
  position: absolute;
  text-align: center;
  color: #FFF;
  border-radius: 10px;
  transition: transform 1.2s;
}

.dp-img img {
  border-left: 1px solid #fff;
}

#dp-slider .dp_item:first-child {
  z-index: 10 !important;
  transform: rotateY(0deg) translateX(0px) !important;
}

.dp_item[data-position="2"] {
  z-index: 9;
  transform: rotateY(0deg) translateX(10%) scale(0.9);
}

.dp_item[data-position="3"] {
  z-index: 8;
  transform: rotateY(0deg) translateX(20%) scale(0.8);
}

.dp_item[data-position="4"] {
  z-index: 7;
  transform: rotateY(0deg) translateX(30%) scale(0.7);
}

#dp-next,
#dp-prev {
  position: absolute;
  top: 50%;
  right: 16%;
  height: 33px;
  width: 33px;
  z-index: 10;
  cursor: pointer;
}

#dp-prev {
  left: 15px;
  transform: rotate(180deg);
}

#dp-dots {
  position: absolute;
  bottom: 25px;
  z-index: 12;
  left: 38%;
  cursor: default;
}

#dp-dots li {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: #ffff;
  border-radius: 50%;
}

#dp-dots li:hover {
  cursor: pointer;
  background: #FA8C8C;
  transition: background .3s;
}

#dp-dots li.active {
  background: #FA8C8C;
}

.dp_item {
  width: 85%;
}

.dp-content,
.dp-img {
  text-align: left;
}

.dp_item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border-top: 5px solid #FA8C8C;
}

.dp-content {
  padding-left: 100px;
  padding-right: 0;
  display: inline-block;
  width: 100%;
}

.dp-content h2 {
  color: #41414B;
  font-family: Circular Std Bold;
  font-size: 48px;
  max-width: 460px;
  margin-top: 8px;
  margin-bottom: 0px;
}

.dp-content p {
  color: #74747F;
  max-width: 490px;
 ...

JavaScript

jQuery(document).ready(function() {

  function detect_active() {
    // get active
    var get_active = $("#dp-slider .dp_item:first-child").data("class");
    $("#dp-dots li").removeClass("active");
    $("#dp-dots li[data-class=" + get_active + "]").addClass("active");
  }
  $("#dp-next").click(function() {
    var total = $(".dp_item").length;
    $("#dp-slider .dp_item:first-child").hide().appendTo("#dp-slider").fadeIn();
    $.each($('.dp_item'), function(index, dp_item) {
      $(dp_item).attr('data-position', index + 1);
    });
    detect_active();

  });

  $("#dp-prev").click(function() {
    var total = $(".dp_item").length;
    $("#dp-slider .dp_item:last-child").hide().prependTo("#dp-slider").fadeIn();
    $.each($('.dp_item'), function(index, dp_item) {
      $(dp_item).attr('data-position', index + 1);
    });

    detect_active();
  });

  $("#dp-dots li").click(function() {
    $("#dp-dots li").removeClass("active");
    $(this).addClass("active");
    var get_slide = $(this).attr('data-class');
    console.log(get_slide);
    $("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
    $.each($('.dp_item'), function(index, dp_item) {
      $(dp_item).attr('data-position', index + 1);
    });
  });


  $("body").on("click", "#dp-slider .dp_item:not(:first-child)", function() {
    var get_slide = $(this).attr('data-class');
    console.log(get_slide);
    $("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
    $.each($('.dp_item'), function(index, dp_item) {
      $(dp_item).attr('data-position', index + 1);
    });

    detect_active();
  });
});

var body = document.body,
  overlay = document.querySelector('.overlay'),
  overlayBtts = document.querySelectorAll('button[class$="overlay"]');

[].forEach.call(overlayBtts, function(btt) {

  btt.addEventListener('click', function() {

    /* Detect the button class name */
    var overlayOpen = this.className ===...