JSFiddle - React, Tailwind, and code Playground

by Brett DeWoody

HTML

<div id="fader">
    <a href="http://google.com"><img src="http://placehold.it/600x600&text=Slide1" ></a>
    <a href="http://digitalwaxworks.com"><img src="http://placehold.it/600x600&text=Slide2" ></a>
    <a href="http://permanentadg.com"><img src="http://placehold.it/600x600&text=Slide3" ></a>
    <a href="http://facebook.com"><img src="http://placehold.it/600x600&text=Slide4" ></a>
</div>

CSS

html,
body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

#fader {
    position: relative; 
    width: auto;
    height: 100%;
}

#fader a {
    display:block;
    width:auto;
    height:100%;    
}

@media screen and (orientation: portrait) {
  img { 
      width: 100%; 
      height:auto !important;
  }
}
@media screen and (orientation: landscape) {
  img { 
      height: 100%;
      min-width:10%;
      max-width:100%;
  }
}

JavaScript

$(function() {
    $('#fader a:not(:first)').hide();
    $('#fader a').css('position', 'absolute');
    $('#fader a').css('top', '0px');
    //$('#fader a').css('left', '50%');
    $('#fader a').each(function() {
        var img = $('img', this);
        $('<img>').attr('src', $(this).attr('src')).load(function() {
            img.css('margin-left', -this.width / 2 + 'px');
        });
    });

    var pause = false;
    
    function fadeNext() {
        $('#fader a').first().fadeOut().appendTo($('#fader'));
        $('#fader a').first().fadeIn();
    }

    function fadePrev() {
        $('#fader a').first().fadeOut();
        $('#fader a').last().prependTo($('#fader')).fadeIn();
    }

    $('#fader, #next').click(function() {
        fadeNext();
    });

    $('#prev').click(function() {
        fadePrev();
    });

    $('#fader, .button').hover(function() {
        pause = true;
    },function() {
        pause = false;
    });

    function doRotate() {
        if(!pause) {
            fadeNext();
        }    
    }
    
    var rotate = setInterval(doRotate, 2000);
});