JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class='container'>
 
    <div class='page active'>1.This next bit on its own is enough to convince me, this one tip is one of the most valuable ones I have, personally.</div>
    <div class='page'>2.Whenever I start a new project I typically want to know two things; my base font-size and my base line-height. Let’s say that I choose a base font-size of 16px and a base line-height of 24px. This gives me (in proper units) this:</div>
    <div class='page'>3.That 1.5 is my Magic Number. This is massively important; knowing this number allows me to set up my entire project’s vertical rhythm in one go:</div>
    <div class='page'>4.Bosh. Done. Now any block level element (I may have missed some) I add anywhere in that page will have a line-height of 24px (if my base font-size is 16px) and will be spaced apart by 24px (again, if my base font-size is 16px).
        

I can extend that list of selectors as and when I need to and all will remain in order:</div>
    <div class='page'>5.For me that is reason enough to stick to just defining my margins in one direction, I can just drop any element anywhere and it will obey the same vertical rhythm as any others.</div>
      <div class='swiper'></div>
</div>
 
<div>
<button id='foo'>click</button>
</div>

CSS

.container {
    background : pink;
    width : 80%;
    margin : auto;
    height : 200px;
    position  : relative;
    overflow : hidden;
}
.swiper {
    width : 100%;
    height : 100%;
    background : yellow;
    position : absolute;
    transform : translate(-100%);
    
}
.page {
    box-sizing : border-box ;
    width : 100%;
    padding : 12px;
    position : absolute;
    left : 100%;
    top : 0;
    overflow : hidden;
}

.page.active{
    animation : anim 1s linear;
    transform : translateX(-100%); 
}
.page.leave {
    animation : animleave 1s linear;
    
}

@keyframes anim {
    0% {
        transform : translateX(-200%); 
    }
    100% {
        transform : translateX(-100%); 
    }
}
@keyframes animleave {
    0% {
        transform : translateX(-100%); 
    }
    100% {
        transform : translateX(0%); 
    }
}

JavaScript

var foo = document.querySelector('#foo');
var pages = document.querySelectorAll('.page');
var currentIndex = 0;
var previousIndex = 4;
foo.addEventListener('click', function(event) {
    pages[previousIndex].classList.remove('leave');
    pages[currentIndex].classList.add('leave');
	var oldActiveIndex = _.findIndex(pages, function(element) {
    	if(element.classList.contains('active')) {
        	element.classList.remove('active');
            
            return true;
        } else {
        	return false;
        };
    });
    previousIndex = oldActiveIndex;
    currentIndex = ++oldActiveIndex % pages.length; 
    
    pages[currentIndex].classList.add('active');
	
}, false);