JSFiddle - React, Tailwind, and code Playground

by brennan

HTML

<div id="dress-bg"><!-- <img id="dress_img" src="" /> --></div>

CSS

div{
    display:block;
    height:700px;
    overflow:hidden;
    width:330px;
    cursor: w-resize;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

JavaScript

var start = 670,
    end = 704,
    current = start,
    imgWidth = 330,
    direction = 0,
    speed = 100,
    leftDown = false,
    interval;

updateInterval();

$('#dress-bg').mousedown(function(){leftDown = true;});
$('#dress-bg').mouseup(function(){leftDown = false;});
$('#dress-bg').mousemove(function(event) {
    if(leftDown){
        if(event.offsetX > (imgWidth/2) ){
            direction = 1;
            var superSpeed = Math.abs(event.offsetX - imgWidth) + 10;
        } else{
            direction = 0;
            var superSpeed = event.offsetX + 10;
        }
        
        speed = superSpeed;
    }
});


function updateInterval(){
    setTimeout(updateImage, speed);
}


function updateImage(){
    url = 'http://gis.ryerson.ca/garments/0221/JPEG/DSC_0' + current + '.jpg';
    //$('#dress_img')
        //.attr('src', url);
    $('#dress-bg')
        .css('background-image', 'url('+url+')');
    
    if(direction == 0){
    
        if(current == end){
            current = start;
        } else{
            current++;
        }
    
    } else if (direction == 1){
    
        if(current == start){
            current = end;
        } else{
            current--;
        }
    
    }
    updateInterval();
}