JSFiddle - React, Tailwind, and code Playground

by srinivaspotluri

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<div class='weeklyreportslides'>
  <div class='weeklyreportslides_slide'>
    
    <div class='weeklyreportslides_slide_filters none'></div>
    <div class='weeklyreportslides_slide_weeklyevents none'></div>
    <div class='weeklyreportslides_slide_venueactivity none'></div>
    <div class='weeklyreportslides_slide_budgetcomparison none'></div>
    
  </div>
  <div class='weeklyreportslides_navigation'>
    <div class='weeklyreportslides_navigation__left'>
      <i class='icon ion-arrow-left-c'></i>
    </div>
    <div class='weeklyreportslides_navigation__right'>
      <i class='icon ion-arrow-right-c'></i>
    </div>
  </div>
  <section class='active_slide' data-slide='none'>
    <div class='center'>
      <h1>Page Navigation</h1>
      <h2>-</h2>
    </div>
  </section>
  
  
  <section data-slide='divide-yaxis'>
    <div class='center'>
      <h1>Fourth</h1>
      <span>%section{'data-slide' => 'divide-yaxis'}</span>
    </div>
  </section>
  <section data-slide='divide-xaxis'>
    <div class='center'>
      <h1>Fifth</h1>
      <span>%section{'data-slide' => 'divide-xaxis'}</span>
    </div>
  </section>
  <section data-slide='slide-left'>
    <div class='center'>
      <h1>Sixth</h1>
      <span>%section{'data-slide' => 'slide-left'}</span>
    </div>
  </section>
  <section data-slide='slide-right'>
    <div class='center'>
      <h1>Seventh</h1>
      <span>%section{'data-slide' => 'slide-right'}</span>
    </div>
  </section>
  
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Nunito:400,700,300);
body {
  margin: 0;
  overflow: hidden;
  padding: 0;
}
body span, body h1, body h2 {
  margin: 0;
}
body h2, body span {
  font-size: 15px;
  font-family: 'nunito';
  color: black;
  margin-top: 10px;
  font-weight: 900;
  opacity: 0.3;
}
body a.download, body a.follow {
  text-align: center;
  margin-top: 40px;
  width: 200px;
  float: left;
  display: inline-block;
  padding: 16px 30px;
  background: #41efb6;
  color: white;
  font-weight: 900;
  font-family: 'nunito';
  text-decoration: none;
  border-radius: 4px;
  margin-left: 22px;
}
body a.download i, body a.follow i {
  margin-right: 10px;
}
body a.follow {
  float: left;
  padding: 14px 30px;
  background: none;
  color: white;
  border: 2px solid white;
}
body a.follow:hover {
  color: #41efb6;
  border-color: #41efb6;
}
body .weeklyreportslides_slide div {
  width: 200px;
  height: 200px;
  background: white;
  position: absolute;
  transform: scale(0);
  z-index: 1;
}
body .weeklyreportslides_slide .split_diagonal, body .weeklyreportslides_slide .split_diagonal_alt, body .weeklyreportslides_slide .split_diamond {
  animation: diamond 1.2s;
  transform: scale(0) rotate(45deg);
}
body .weeklyreportslides_slide .divide-xaxis, body .weeklyreportslides_slide .wipe_top, body .weeklyreportslides_slide .slide-bottom {
  transform: scaleY(0);
}
body .weeklyreportslides_slide .divide-yaxis, body .weeklyreportslides_slide .slide-left, body .weeklyreportslides_slide .slide-right {
  transform: scaleX(0);
}
body .weeklyreportslides_slide__part-1 {
  left: -100px;
  top: -100px;
}
body .weeklyreportslides_slide__part-1.split_diagonal_alt, body .weeklyreportslides_slide__part-1.divide-yaxis, body .weeklyreportslides_slide__part-1.divide-xaxis {
  display: none;
}
body .weeklyreportslides_slide__part-2 {
  bottom: -100px;
  left: -100px;
}
body .weeklyreportslides_slide__part-2.split_diagonal, body...

JavaScript

// Options

var slide_time = 1200; // The time it takes to complete an entire transition
var change_point = slide_time / 2; // Calculates when the slide should change
var right_arrow = $('.weeklyreportslides_navigation__right'); // Element that trigger move right
var left_arrow = $('.weeklyreportslides_navigation__left'); // Element that trigger move left
var slide_amount = $('.weeklyreportslides section').length; // How many slides
var current_slide = 1; // Starting slide
var on = 1;

right_arrow.click(function(){
  if(on == 1){
    on = 0;
    if(current_slide < slide_amount){
      current_slide++;
      var active_slide = $('.active_slide').next()
      set_transition(active_slide);
      setTimeout(function(){
        $('.active_slide').hide().removeClass('active_slide').next().addClass('active_slide').show();
      },change_point);
      setTimeout(function(){
        on = 1;
      },slide_time);
    } else {
      // End
    }
  }
});

left_arrow.click(function(){
  if(on == 1){
    on = 0;
    if(current_slide > 1){
      current_slide--;
      var active_slide = $('.active_slide').prev()
      set_transition(active_slide);
      setTimeout(function(){
        $('.active_slide').hide().removeClass('active_slide').prev().addClass('active_slide').show();
      },change_point);
      setTimeout(function(){
        on = 1;
      },slide_time);
    } else {
      // Start
    }
  }
});

// Set transition type

function set_transition(tran){
  var transition_type = tran.data('slide')
  $('.weeklyreportslides_slide div').each(function(){
    $(this).removeClass(this.className.split(' ').pop());
    setTimeout(function(){
      $('.weeklyreportslides_slide div').addClass(transition_type)
    },100)

  })
}