JSFiddle - React, Tailwind, and code Playground

by bingjie2680

HTML

<div id="mmGallery_container">
    <div id="mmGallery">
        <img src="http://roko.x10.mx/galerija/velika/demo6.jpg"/>
        <img src="http://roko.x10.mx/galerija/velika/kreato.jpg"/>
        <img src="http://roko.x10.mx/galerija/velika/aquarius.jpg"/>
        <img src="http://roko.x10.mx/galerija/velika/suma.jpg"/>
        <img src="http://roko.x10.mx/galerija/velika/demo1.jpg"/>
        <img src="http://roko.x10.mx/galerija/velika/kom_big.jpg"/>
        <img src="http://roko.x10.mx/galerija/velika/jagic.jpg"/>
        <img src="http://roko.x10.mx/galerija/velika/kkzen.jpg"/>
        <img src="http://roko.x10.mx/galerija/velika/demo2.jpg"/>
    </div>
</div>

CSS

/* ***** mmGallery ***** */

#mmGallery_container{
    position:relative;

    height:300px;
    width:400px; 
    overflow:hidden;
    border:12px solid #000;
    background:#000;
}
#mmGallery{
    cursor:col-resize;
    position:relative;
}
#mmGallery img{
    position:relative;
    float:left;
}

JavaScript

$(function(){

    mmGalSpeed = 100; 

    sumW = 0;    
    $('#mmGallery img').each(function(){
        sumW += $(this).width();
        $('#mmGallery').width(sumW);
    });  

    wDiff1 = $('#mmGallery_container').outerWidth(true);
    wDiff2 = $('#mmGallery').width();
    wDiff = ((wDiff2/wDiff1)-1).toFixed(2); 
    
    mouseX = 0;
    $("#mmGallery_container").mousemove(function(e) {
        mouseX = (e.pageX - this.offsetLeft);
    });
        
    var xSlider = $("#mmGallery");     // cache element
    var posXdec = 0;
    setInterval(function(){ 
        posXdec += (mouseX - posXdec) / mmGalSpeed; 
        posX = (posXdec).toFixed(2); 
        xSlider.css({marginLeft: '-'+Math.round(posX * wDiff) +'px' });
    }, 10); 
});