JSFiddle - React, Tailwind, and code Playground

by Nivaldo

HTML

<div class="bloc_1_edito">
<div id="nav_container">
<div id="next_nav">></div>
<div id="prev_nav"><</div>
<div id="nav">

        <li class="activeSlide">
            <a href="#">
                <img class="image_thumbnails" src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/image_edito1.jpg"></img>
            </a>
        </li>
        <li>
            <a href="#">
                <img class="image_thumbnails" src="http://img.youtube.com/vi/yjtqkQFAn5U/0.jpg"></img>
            </a>
        </li>
        <li>
            <a href="#">
                <img class="image_thumbnails" src="http://img.youtube.com/vi/KNz01ty-kTQ/0.jpg"></img>
            </a>
        </li>
        <li>
            <a href="#">
                <img class="image_thumbnails" src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/test_2_slider.jpg"></img>
            </a>
        </li>
        <li>
            <a href="#">
                <img class="image_thumbnails" src="http://img.youtube.com/vi/hn0wAloRrMM/0.jpg"></img>
            </a>
        </li>
        <li>
            <a href="#">
                <img class="image_thumbnails" src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/the-order-1886-012814-3-650x366.jpg"></img>
            </a>
        </li>
        <li>
            <a href="#">
                <img class="image_thumbnails" src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/jpg_650x366_bluegrass.png"></img>
            </a>
        </li>
        <li>
            <a href="#">
                <img class="image_thumbnails" src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/c…-scientifique-Canyons-Mediterranee-ROV-650x366_reference.jpg"></img>
            </a>
        </li>
        <li>
            <a href="#">
                <img class="image_thumbnails" src="http://img.youtube.com/vi/syzS14qzfMA/0.jpg"></img>
            </a>
        </li>
    </div>

</div>
</div>

CSS

.bloc_1_edito{width: 967px;background-color: #bbbbbb;height: 366px;margin:0 auto;position: relative}

#nav_container {
    z-index: 10000;
    bottom: 0px;
    background-color: rgba(181, 174, 5, 0.4);
    position: absolute;
    height: 80px;
    overflow: hidden;
    width: 500px;
    white-space: nowrap;
}
.image_thumbnails{width: 116px;height: 65px;}
#prev_nav{position: absolute;
left: 5px;font-size:20px;font-family: 'avantgarde_medium';
font-weight: bold;top:30px;color: blacks;cursor: pointer;z-index: 1000;}
#next_nav{position: absolute;
right: 5px;font-size:20px;font-family: 'avantgarde_medium';
font-weight: bold;top:30px;color: black;cursor: pointer;z-index: 1000;}
#nav{
    position: absolute; 
    width: 500px;
    overflow: hidden;
}

#nav li { width: 116px; height:65px; display: inline-block; margin: 10px 5px 8px 33px;list-style: none }
#nav a { width: 116px; height:65px; display: block; }
#nav li.activeSlide a {}
#nav a:focus { outline: none; }
#nav img { border: none; display: block }

JavaScript

$('#next_nav').click(function () {
    	$( "#nav" ).animate({
    		scrollLeft: '+=156px'
    	});
    });
    $('#prev_nav').click(function () {
    	$( "#nav" ).animate({
    		scrollLeft: '-=156px'
    	});
    });