JSFiddle - React, Tailwind, and code Playground

by andrewwhitaker

HTML

<div class="work">
    <div class="nav">
<a href="#" class="rightButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/right.png" /></a><a href="#" class="leftButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/left.png" /></a>        
    </div>
    <div class="scroller">
        <div class="items">
    <a href="#" class="1"><img class="topLeft" src="http://i.imgur.com/JQFbb.jpg" /></a><a href="#" class="2"><img class="topRight" src="http://i.imgur.com/l5OPs.jpg" /></a><a href="#" class="3"><img class="bottomLeft" src="http://i.imgur.com/okxQz.jpg" /></a><a href="#" class="4"><img class="bottomRight" src="http://i.imgur.com/4uPHw.jpg" /></a>
    </div>
    </div>
</div>

CSS

/* positioning */
img.topLeft {width:300px; height:240px; border:none;}
img.topRight {width:300px; height:240px; border:none;}
img.bottomLeft {width:300px; height:240px; border:none;}
img.bottomRight {width:300px; height:240px; border:none;}
/* element dimensions */
div.work { background-color: #ddd; height:240px; position: relative; width:300px;  margin-left:10px}
div.items { position:relative;  width: 1000em; height: 240px; }
div.scroller { overflow: hidden; width: 300px; height: 100%; }


div.work a.leftButton {position:absolute; top:104px; left:-15px; z-index:11;}

div.work a.rightButton {position:absolute; top:104px; right:-15px; z-index:11;}

JavaScript

// prevent click jump
$('a').click(function() {
    return false;
});

// do work
$('.work .leftButton').click(function() {
    var $items = $(".items");
    if ($items.position().left === 0) {
        $items.css("left", "-300px");
        $items.children("a:last").prependTo($items);
    }
    $(".items").animate({
        left: "+=300px"
    });
});

$('.work .rightButton').click(function() {
    var $items = $(".items");
    if ($items.position().left === -900) {
        $items.css("left", "-600px");
        $items.children("a:first").appendTo($items);
    }
    
    $(".items").animate({
        left: "-=300px"
    });
    
});