JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenLite.min.js"></script>
<div id="blanket">
    <div id="carousel">
        <img id="img1" src="http://www.somerandomfacts.com/wp-content/uploads/2013/11/random.jpg" /><img id="img2" src="http://www.somerandomfacts.com/wp-content/uploads/2013/11/random.jpg" /><img id="img3" src="http://www.somerandomfacts.com/wp-content/uploads/2013/11/random.jpg" />
    </div>
</div>
<div id="pane1">Goto pane1</div>
<div id="pane2">Goto pane2</div>
<div id="pane3">Goto pane3</div>

CSS

#blanket {
    position:relative;
    width:350px;
    height:270px;
    overflow:hidden;
}
#carousel {
    position:relative;
    height:100%;
    width:305%;
    padding:0;
}
#carousel img {
    position:relative;
    width:33%;
    height:100%;
    left:0;
    padding:0;
 /*   margin:-2px;*/
    display:inline-block;
}

JavaScript

$(document).click(function () {
    var i = event.target.id;
    if (i == "pane1") {
        gets(0);
    } else if (i == "pane2") {
        gets(1);
    } else if (i == "pane3") {
        gets(2);
    }
});

function gets(i) {
    var off = -1 * (i * $('#carousel img').width());
    TweenLite.to($('#carousel img'), 0.7, {
        left: off + "px",
        ease: Power2.easeOut
    });
}