JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div id="slider">
    <div id="mask">
        <section class="slider_page">HOME.</section>
        <section class="slider_page">BLOG.</section>
        <section class="slider_page">CONT.</section>
    </div>
</div>

<button id="slider_prev">PREV</button>
<button id="slider_next">NEXT</button>

CSS

html, body {
    width: 100% ;
    height: 100% ;
    margin: 0 ;
    padding: 0 ;
    font: inherit ;
    border: 0 none ;
    overflow: hidden ;
}

div#slider {
    height: 200px ;
}

div#slider div#mask {
    overflow: hidden ;
}

div#slider section.slider_page {
    position: absolute ;
    height: 200px ;
}

JavaScript

function updateSection( dir ) {
    // Werte ermitteln
    var docw = $(window).width( ) ;
    var objSliderPages = $('div#slider section.slider_page') ;
    var iCurr = objSliderPages.filter( function( ) { return $(this).hasClass( 'selected' ) ; } )
                              .index( ) ;
    
    if( dir == 'prev' ) { iCurr-- ; } else { iCurr++ ; }
    if( iCurr >= objSliderPages.length ) { iCurr = 0 } else if( iCurr < 0 ) { iCurr = 2 } ;
    
    //alert( iCurr ) ;
   
    // Elemente verschieben
    objSliderPages.each( function( ) {
        $(this).removeClass( 'selected' )
               .animate( { left : ($(this).index( ) - iCurr) * docw }, 600, function() {
                   objSliderPages.filter( function() {return $(this).position().left==0;} ).addClass( 'selected' ) ;
                }) ;
    } ) ;
}

$(document).ready( function( ) {
    // Werte ermitteln
    var docw = $(window).width( ) ;
    var objSlider = $('div#slider') ;
    var objSliderPages = $('div#slider section.slider_page') ;
    
    // Elemente ausrichten
    objSlider.css( { width : objSliderPages .length * docw } ) ;
    objSliderPages.each( function( ) {
        $(this).css( {
                    left : $(this).index( ) * docw, 
                    backgroundColor : '#C0C0C0', 
                    width : docw            
                } ) ;
    } ) ;
    objSliderPages.first( ).addClass( 'selected' ) ;
} ) ;

$('button#slider_prev').click( function( ) { updateSection( 'prev' ) ; } ) ;
$('button#slider_next').click( function( ) { updateSection( 'next' ) ; } ) ;