JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<!-- kougiland.com/lab  for developers-->
<article id=infinity>
    <div class=numberOfPages>
        <span class=currentPageNumber>00</span>
        <span class=allPages>00</span>
    </div>
<input id=checkBoxAutoPlay type='checkbox' name='autoPlay' hidden>
<label for='checkBoxAutoPlay'>autoPlay</label>
<span class="prev"></span>
<span class="next"></span>    
<ul>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/49d026bb4e5c107fa403ba4f32acc7fd.jpg"></li>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/cda9796bbb9820d8e93e992df8a148f1.jpg"></li>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/439aaad865f43ee3e3842f23dcf75c1b.jpg"></li>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/5fee7dbace67ebbfc17564e458dda1c7.jpg"></li>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/e4ac9659ecf4cd5fcffc379222f10915.png"></li>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/cda9796bbb9820d8e93e992df8a148f1.jpg"></li>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/439aaad865f43ee3e3842f23dcf75c1b.jpg"></li>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/5fee7dbace67ebbfc17564e458dda1c7.jpg"></li>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/e4ac9659ecf4cd5fcffc379222f10915.png"></li>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/cda9796bbb9820d8e93e992df8a148f1.jpg"></li>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/439aaad865f43ee3e3842f23dcf75c1b.jpg"></li>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/5fee7dbace67ebbfc17564e458dda1c7.jpg"></li>
    <li><img src="http://behance.vo.llnwd.net/profiles/60285/projects/5735155/e4ac9659ecf4cd5fcffc379222f10915.png"></li>
    <li><img...

CSS

article#infinity{
position:absolute;
 left:0;
top:0;
 right:0;
bottom:0;
 overflow:hidden;   
}
article#infinity ul{
width:100%;
max-width: 960px;
height:100%;
max-height: 100%;  
position:relative;    
margin:0 auto;
}

article#infinity ul li { overflow:hidden;
    width:100%;
    height:100%;
    position:absolute;
    float:left; 
    margin: 10px 5px;
-webkit-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
   -moz-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
    -ms-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
     -o-transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
        transition: all 1000ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
    -ms-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
}
article#infinity ul li.active{
-webkit-animation: fadeIn 1s linear backwards .4s;
-moz-animation: fadeIn 1s linear backwards .4s;
-o-animation: fadeIn 1s linear backwards .4s;
-ms-animation: fadeIn 1s linear backwards .4s;
animation: fadeIn 1s linear backwards .4s;
}
article#infinity ul li:not(.active) {    
/*for mor animations change top:-200 px with one of the code bellow
    bottom:-200%;
    left:-200%;
    right:-200%;
*/
top:-200%;
opacity:0!important;    
}
article#infinity ul li.before { 
/*for mor animations change top:-200 px with one of the code bellow
left:-200%!important;
right:-200%!important;
bottom:-200%!important;
*/    
top:-200%!important; 
}
article#infinity ul li.after { 
/*for mor animations change top:-200 px with one of the code...

JavaScript

$("article#infinity ul:visible li:first").addClass('active');

$("article#infinity .prev, article#infinity .next").on('click', function() {

var allPages = $("article#infinity ul:visible >li").length-1;
$("div.numberOfPages span.allPages").html(allPages);
    
var currentPageNumber = $("article#infinity ul:visible >li.active").index();
$("div.numberOfPages span.currentPageNumber").html(currentPageNumber);

    if ($("article#infinity ul:visible li.active")[$(this).attr('class')]().index()!=-1){
    $("article#infinity ul:visible li.active").removeClass('active')[$(this).attr('class')]().addClass('active').removeClass("before after").prevAll().removeClass("after").addClass("before");
        $("article#infinity ul:visible li.active").nextAll().removeClass("before").addClass("after");}
    else if ($("article#infinity ul:visible li.active")[$(this).attr('class')]().index()==-1){
        $("article#infinity ul:visible li:first").removeClass('before after').addClass('active').siblings('li').removeClass('active before').addClass("after");
    } 
});
/* auto play */
$('input#checkBoxAutoPlay').click(function(){
  $("article#infinity").toggleClass('infinity');     
});

function play() {
    setInterval(function(){      
     $("article.infinity:visible .next").click();  
    }, 3000);
}
play();


$(window).resize(function () { /* do something */ });


/* offline notebook */

var offLineNotes = document.querySelector('#notebook');  
     /* place content from previous edit */
      if (!offLineNotes.value) {
        offLineNotes.value = window.localStorage.getItem('value');
      }
       
      /*  save content locally */
      offLineNotes.addEventListener('keyup', function () {
        window.localStorage.setItem('value', offLineNotes.value);
}, false);