JSFiddle - React, Tailwind, and code Playground

by deepak datwani

HTML

<div class="wrape slider_css">
        <div class="container vert1">
          <div class="content content-1" data-id="content-1">
            <h1>Content Sliding1</h1>
            <a href="javascript:void(0);" class="down">Down</a>
          </div>
          <div class="content content-2" data-id="content-2">
            <h1>Content Sliding2</h1>
            <a href="javascript:void(0);" class="down">Down</a>
          </div>
          <div class="content content-3" data-id="content-3">
            <h1>Content Sliding3</h1>
            <a href="javascript:void(0);" class="down">Down</a>
          </div>
          <div class="content content-4" data-id="content-4">
            <h1>Content Sliding4</h1>
            <a href="javascript:void(0);" class="down">Down</a>
          </div>
          <div class="content content-5" data-id="content-5">
            <h1>Content Sliding5</h1>
            <a href="javascript:void(0);" class="down">Down</a>
          </div>
          <div class="navigation">
            <a href="javascript:void(0)" class="prev">Previous</a>
            <a href="javascript:void(0)" class="next">Next</a>
          </div>
        </div>
        <div class="container vert2">
          <div class="content2 content2-1" data-id="content-1">
            <h1>Verticle Sliding1</h1>
            <a href="javascript:void(0);" class="up">Up</a>
          </div>
          <div class="content2 content2-2" data-id="content-2">
            <h1>Verticle Sliding2</h1>
            <a href="javascript:void(0);" class="up">Up</a>
          </div>
          <div class="content2 content2-3" data-id="content-3">
            <h1>Verticle Sliding3</h1>
            <a href="javascript:void(0);" class="up">Up</a>
          </div>
          <div class="content2 content2-4" data-id="content-4">
            <h1>Verticle Sliding4</h1>
            <a href="javascript:void(0);" class="up">Up</a>
          </div>
          <div class="content2 content2-5" data-id="content-5">
    ...

CSS

.container{width:100%;position:relative;overflow-x:hidden;height:100%;}
      .content,.content2{position:absolute;width:100%;text-align:center;height:300px;-webkit-animation:slide 0.3s forwards;-webkit-animation-delay:2s;animation:slide 0.3s forwards;animation-delay:2s;}
      .content-1,.content2-1{background:#f00}
      .content-2,.content2-2{background:#0f0}
      .content-3,.content2-3{background:#00f}
      .content-4,.content2-4{background:#ddd}
      .content-5,.content2-5{background:#eee}
      .slide_animate{transition:.5s;}
      .slider_css{position:relative;height:100%;width:100%;overflow-y:hidden}
      .navigation{position:absolute;bottom:0px;width:100%}
      .navigation .next,.navigation .next1{float:right;}
      .navigation .prev,.navigation .prev1{float:left;}
      @-webkit-keyfframes slide{100%{left:0}}
      @keyfframes slide{100%{left:0;}}
      @-webkit-keyfframes slideup{100%{top:0}}
      @keyfframes slideup{100%{top:0}}

JavaScript

if ( typeof Object.create !== 'function' ) {
   Object.create = function( obj ) {
     function F(){}
     F.prototype = obj;
     return new F();
   };
}
(function($){
   var jqcssSlider = {
     init:function(options, elem){
       var self = this;
       self.elem = elem;
       self.$elem = $(elem);
       self.default = 1;
       self.current_slide = self.counter = self.default;
       self.options = $.extend({}, $.fn.jqueryCssSlider.options, options);

       $('.'+self.options.slides).css({'left':'100%'});
       $('.'+self.options.slides+'-'+self.default).css({'left':'0'});
       $('.'+self.options.next).click(function(){
         var buffer = self.counter;
         self.counter = self.counter+1;
         if(self.counter <= 5)
         {
            $('.'+self.options.slides+'-'+self.counter).css({'left':'0','z-index':'1'});
            $('.'+self.options.slides+'-'+self.counter).addClass('slide_animate');
            self.current_slide = self.counter;
            setTimeout(function(){
             $('.'+self.options.slides+'-'+buffer).css({'left':'100%','z-index':0});
             $('.'+self.options.slides+'-'+buffer).removeClass('slide_animate');
             $('.'+self.options.slides+'-'+self.counter).css({'z-index':'0'});
           },1000);
         }
         else
         {
           self.counter = self.counter-1;
         }
       });
       $('.'+self.options.previous).click(function(){
         var buffer = self.counter;
         self.counter = self.counter-1;
         if (self.counter >= 1) {
           $('.'+self.options.slides+'-'+buffer).css({'z-index':0});
           $('.'+self.options.slides+'-'+self.counter).addClass('slide_animate');
           $('.'+self.options.slides+'-'+self.counter).css({'left':'0','z-index':'5'});
           self.current_slide = self.counter;
           setTimeout(function(){
             $('.'+self.options.slides+'-'+buffer).css({'left':'100%'});
            ...