JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="logo">

    </div>

    <div id="triangle">

    </div>

    <div id="wrapper">

        <div class="item" id="content1">

            <div id="pic1"></div></div>

        <div class="item" id="content2">

            <div id="pic2"></div></div>

        <div class="item" id="content3">

            <div id="cpic3"></div></div>

        <div class="item" id="content4">

            <div id="pic4"></div></div>

    </div>

    <div id="nav">

        <ul>

            <li><a href="javacript:void(0);" class="selected" onclick="scrolls(0)"></a></li>
            <li><a href="javacript:void(0);" onclick="scrolls(1)"></a></li>
            <li><a href="javacript:void(0);" onclick="scrolls(2)"></a></li>
            <li><a href="javacript:void(0);" onclick="scrolls(3)"></a></li>

        </ul>

    </div>

    <div id="button">

    <a href="javacript:void(0);" onclick="next()"></a>

    </div>

CSS

#logo
{
    position: absolute;
    top: 10px;
    left: 10px;
    top: 10px;
    height: 200;
    width: 160px;
    background-image:url('http://www.thewayithink.co.uk/ie8/book/images/logo.png');
    z-index: 2;
}

#triangle
{
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    top: 0px;
    height: 400px;
    width: 750px;
    background-image:url('http://www.thewayithink.co.uk/ie8/book/images/triangle.png');
}

#nav
{
    position: absolute;
    bottom: 10px;
    width: 300px;
    height: 20px;
    left: 40%;
}

#nav ul
{
    position: absolute;
    bottom: 10px;
    width: 300px;
    height: 20px;
    clear: both;
    display: block;
    list-style-type: none;
    list-style-position: outside;
    list-style-image: none;
}

#nav ul li
{
    float: left;
}

#nav ul li a
{
    position: relative;
    top: 0px;
    margin-right: 5px;
    background-color: Black;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: block;
}

#nav ul li a:hover
{
    background-color: #e1e1e1;
}

#nav ul li .selected
{
    background-color: #e5e5e5;
}

#button
{
    position:absolute;
    width:80px;
    right:0px;
    height:100%;
    z-index:3;
}
#button a
{
    position:absolute;
    top:40%;
    width:80px;
    height:80px;
    background-image:url('http://www.thewayithink.co.uk/ie8/book/images/button.png');
    display:block;
}

#wrapper
{
   position:absolute;
   overflow:hidden;
}
.item
{
    position: absolute;
    background-color: #fff;
}

#pic1
{
    position:relative;
    top:30%;
    left:30%;
    width:550px;
    height:550px;
    background-color:#fff;
    background-image:url('http://www.thewayithink.co.uk/ie8/book/images/content1.png');
}
#pic2
{
    position:relative;
    top:30%;
    left:30%;
    width:550px;
    height:550px;
    background-color:#fff;
    background-image:url('http://www.thewayithink.co.uk/ie8/book/images/content2.png');
}
#pic3
{
    position:relative;
    top:30%;
    left:30%;
   ...

JavaScript

var theWidth;
var theHeight;
var currentContent = 0;

$(window).resize(function () {
    sizeContent();
});

$(window).ready(function () {
    sizeContent();
});

function sizeContent() {
    theWidth = $(window).width();
    theHeight = $(window).height();
    sizeContentItems();
    setLeftOnContentItems();
    sizeContentWrapper(theWidth, theHeight);
    moveContent(currentContent, theWidth);
    changeSelected(currentContent);
}

function sizeContentItems() {
    $(".contentItem").css('width', theWidth);
    $(".contentItem").css('height', theHeight);
}

function setLeftOnContentItems() {
    var contentCount = 0;
    $(".item").each(function (i) {
        contentCount += i;
        $(this).css('left', i * theWidth);
    });
}

function sizeContentWrapper(width, height) {
    $("#wrapper").css('width', width - 80);
    $("#wrapper").css('height', height);
}

function moveContent(i, width) {
    $("#wrapper").scrollLeft(i * width);
}

function changeSelected(i) {
    $(".selected").removeClass("selected");
    $("li:eq(" + i + ") a").addClass("selected");
}

function next() {
    scrolls(currentContent + 1);
}

function scrolls(i) {
    i = checkMax(i);
    scrollLogo(i);
    scrollTriangle(i);
    changeSelected(i)
    currentContent = i;
    $("#wrapper").animate({ scrollLeft: i * theWidth }, 1000);
}

function scrollLogo(i) {
    var left = (i * -200) + 20;
    $("#logo").animate({ left: left }, 1000);
}

function scrollTriangle(i) {
    var left = (i * -300);
    $("#triangle").animate({ left: left }, 1000);
}

function checkMax(i) {
    var maxItems = $("li").length;
    if (i >= maxItems) {
        return 0;
    }
    return i;
}