JSFiddle - React, Tailwind, and code Playground

by Lindsay Mantzel

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="imageSlider">
    <div id="prev">
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/prev.png" width="40px" />
    </div>
    <div id="next">
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/next.png" width="40px" />
    </div>
    <div id="sliderWrapper">
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
        <img src="http://www.northerntechnomics.com/lmantzel/googlemap/fortcreek.JPG" height="90px;" />
    </div>
</div>

CSS

#sliderWrapper {
    left: 40px;
    width: calc(100% - 80px);
    white-space: nowrap !important;
    height: 100%;
    position: relative;
    background: #999;
    overflow-x: hidden;
}
img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#next {
    height: 100%;
    position: absolute;
    right: 0;
    background: #555;
    z-index: 1;
}
#prev {
    height: 100%;
    position: absolute;
    left: 0;
    background: #555;
    z-index: 1;
}
#imageSlider {
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden;
}
::-webkit-scrollbar {
    display: none;
}

JavaScript

$('#next').hover(function () {
    $('#sliderWrapper').animate({
        scrollLeft: "+=200px"
    }, "fast");
});
$('#prev').hover(function () {
    $('#sliderWrapper').animate({
        scrollLeft: "-=200px"
    }, "fast");
});