JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="img-gallery" class="default-skin img-gallery" oncontextmenu="return false">	<a href="images/studio/img1.jpg">
    	<div class="column">
			<div class="post">
				<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" class="img-gal" oncontextmenu="return false"/>
	    	</div>
		</div>
	</a>
	<a href="images/studio/img2.jpg">
		<div class="column">
			<div class="post">
				<img src="https://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
	<a href="images/studio/img3.jpg">
		<div class="column">
			<div class="post">
	    		<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
	<a href="images/studio/img4.jpg">
		<div class="column">
  		    <div class="post">
				<img src="https://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>
		</div>
	</a>
 <a href="images/studio/img5.jpg">
		<div class="column">
			<div class="post">
				<img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" class="img-gal" oncontextmenu="return false"/>
			</div>

CSS

#img-gallery {
    height:500px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
    padding-left: 50px;
    padding-right: 50px;
}
.column {
    display:inline-block;
    white-space: nowrap;
    width:auto;
    margin-top: 175px;
    margin-bottom:175px;
}
.post {
    height:150px;
}
.img-gal {
    height: 150px;
}

JavaScript

var $content = $('#img-gallery'); // Cache your selectors!
var allowMove = false;
$(".img-gallery").on("mousemove", function (event) {
    allowMove = (event.pageX > ($(window).width() / 2)) ? true : false;
});
$(".img-gallery").hover(function loop() {
    if (allowMove) {
        $content.stop().animate({
            marginLeft: '-=1600'
        }, 2000, 'linear', function () {
            $content.css({
                marginLeft: "0px"
            });
            loop();
        });
    }
}, function stop() {
    $content.stop();
});