SlideShow hover on left, move images right

Question

I have a slideshow that moves to the left when I hover over it. What I am trying to do is have it when I put my mouse on the left side, the slide moves left but when I put my mouse on the right side, the slide moves right. When I put my mouse in the middle, it doesn't move. Can't quite figure out how to do it.

https://jsfiddle.net/jzhang172/gq3j8993/1/

var $content = $('#imgsList'); // Cache your selectors!
$(".cont").hover( function loop() {
    $content.stop().animate({  marginLeft: '-=1600' }, 5000, 'linear', function(){
        $content.css({ marginLeft : "0px" });
        loop();
    });
}, function stop() {
    $content.stop();
});

.Img_cl1 .hde img {
    width: 112px;
    margin: 18px 0px;
}
.cl1 img:hover {
    margin-top:-35px;
}
.cl2 img:hover {
    margin-top:-34px;
}
.cl3 img:hover {
    margin-top:-35px;
}
.cl4 img:hover {
    margin-top:-36px;
}
.cl5 img:hover {
    margin-top:-48px;
}
.cl6 img:hover {
    margin-top:-45px;
}
.cl7 img:hover {
    margin-top:-34px;
}
.cl8 img:hover {
    margin-top:-47px;
}
.cl9 img:hover {
    margin-top:-51px;
}
.cl10 img:hover {
    margin-top:-51px;
}
.cl11 img:hover {
    margin-top:-37px;
}
.cl12 img:hover {
    margin-top:-37px;
}

.Img_cl1 .hde {
    float:left !important;
    width:200px !important;
    text-align:center;
}
.fdfll {
    width:2455px;
    float:left;
    overflow:hidden;
}
#cont1 {
    float:left;
}
#contS {
    width:100%;
    float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
    <div id="cont1">
        <div id="contS" class="Img_cl1">
            <div id="imgsList" class="col-md-12 fdfll  scroll-left">
                
                    <div class=" cl1 hde ">
                        <img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
                    </div>
                
               
                    <div class=" cl2 hde">
                        <img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
                    </div>
                
               
                    <div class=" cl3 hde ">
                        <img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
                    </div>
                
               
                    <div class="  cl4 hde ">
                        <img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
                    </div>
                
               
                    <div class=" cl5 hde ">
                        <img alt="client" src="http://jeffbaij.com/blog/snorlaxghost/images/snorlax01.png" />
                    </div>
                
                
                    <div class=" cl6 hde ">
                        <img alt="client" src="http://cdn.bulbagarden.net/upload/thumb/f/f4/Snorlax_anime.png/250px-Snorlax_anime.png" />
                    </div>
                
                    <div class=" cl7 hde ">
                        <img alt="client" src="http://cdn.bulbagarden.net/upload/thumb/f/f4/Snorlax_anime.png/250px-Snorlax_anime.png" />
                    </div>
                
                    <div class=" cl8 hde ">
                        <img alt="client" src="http://cdn.bulbagarden.net/upload/thumb/f/f4/Snorlax_anime.png/250px-Snorlax_anime.png" />
                    </div>
                
                    <div class=" cl9 hde ">
                        <img alt="client" src="http://img14.deviantart.net/d1f8/i/2012/154/2/4/proud_charmander_by_kol98-d525yi2.png" />
                    </div>
                
                    <div class=" cl10 hde ">
                        <img alt="client" src="http://img2.wikia.nocookie.net/__cb20150510232331/ssb/images/a/a4/.028_Pikachu_%26_Zachary_28_88.png" />
                    </div>
                </a>
                <a target="_blank" href="http://reveye.in/">
                    <div class=" cl11 hde ">
                        <img alt="client" src="http://img2.wikia.nocookie.net/__cb20140410200723/pokemon/images/archive/1/16/20150102074354!025Pikachu_OS_anime_10.png" />
                    </div>
                
                    <div class=" hde cl12 ">
                        <img alt="client" src="http://oyster.ignimgs.com/mediawiki/apis.ign.com/pokemon-blue-version/8/89/Pikachu.jpg" />
                    </div>
                
            </div>
        </div>
    </div>
</div>

Answer 1

One option you can try is to create two elements to serve as controls for the right/left hover events, rather than determining which side you're hovering on through code. Then, absolutely position them and place them on either side of the slideshow window.

So your HTML might look like:

<div class="cont">
    <div id="cont1">
        <div id="contS" class="Img_cl1">
            <div class="slide-control left">Left</div>
            <div class="slide-control right">Right</div>
            <div id="imgsList" class="col-md-12 fdfll  scroll-left">
                <!-- Images go here -->                
            </div>
        </div>
    </div>
</div>

And your JavaScript would then become:

var $content = $('#imgsList'); // Cache your selectors!

$(".slide-control.left").hover( function loop() {
    $content.stop().animate({  marginLeft: '-=1600' }, 5000, 'linear', function(){
        $content.css({ marginLeft : "0px" });
        loop();
    });
}, function stop() {
    $content.stop();
});

$(".slide-control.right").hover( function loop() {
    $content.stop().animate({  marginLeft: '+=1600' }, 5000, 'linear', function(){
        $content.css({ marginLeft : -$content.outerWidth() });
        loop();
    });
}, function stop() {
    $content.stop();
});

Here's a JSFiddle to demonstrate the solution. I've added some styling to the controls, but if you don't actually want them to appear you could just use visibility: hidden. Hope this helps! Let me know if you have any questions.

Answer 2

Change the function loop with following code:

function loop(e) {
    var widthBy2 = $(this).width()/2,
        pos = e.pageX,
        inc;
    if(pos < widthBy2-50){
        inc = '-=1600';
    }else if(pos > widthBy2 + 50){
         inc = '+=1600';
    }else{
        inc = "+=0";
    }

    $content.stop().animate({  marginLeft: inc }, 5000, 'linear', function(){
        $content.css({ marginLeft : "0px" });
        loop();
    });
}