Picture Slider - JSFiddle

by Norbert Wilms

HTML

<script src="https://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<div id=head>Just a headline</div>
<div id=wrapper>
  <div id="pic0"></div>
  <div id="pic1"></div>
  <div id="pic2"></div>
</div>
<div id=mouse></div><div id=div_w></div><div id=mouse></div>
<div id=wid></div><div id=mouse_dx></div>

CSS

#wrapper {
  width: 300px;
  height: 200px;
  background-color: #599;
  top: 0;
  left: 0;
}
#head {
  height: 50px;
  width: 300px;
  background-color: #ff4;
}
#pic0 {
  width: 0;
  height: 200px;
  background-color: #333;
  position: relative;
  float : left;
}
#pic1 {
  width: 300;
  height: 200px;
  background-color: #333;
  position: relative;
  float : left;
}
#pic2 {
  width: 0;
  height: 200px;
  background-color: #1ff;
  position: relative;
  float : left;
}
#pic2 img {
  height: 200px;
  overflow: hidden;
}

JavaScript

$(document).ready(function() {
  var img1="url('https://farm4.staticflickr.com/3902/14985871946_24f47d4b53_h.jpg')";
  var img2="url('https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg')";
  var img3="url('https://farm4.staticflickr.com/3920/15008465772_d50c8f0531_h.jpg')";
  var img_params=" no-repeat scroll 0 0";
//  alert('test');
  $('#pic0').css({'background': img1+img_params, 'background-size': '300px'});
  $('#pic1').css({'background': img2+img_params, 'background-size': '300px'}).show();
  $('#pic2').css({'background': img3+img_params, 'background-size': '300px'});
//  alert('test1');
  $('#pic1').on('mousedown', function(e) {
//  alert('test');
    var mouse_x0 =  e.pageX;
    $(document).bind('mousemove', function(e) {
      var mouse_dx = e.pageX - mouse_x0;
      $('#mouse_dx').html(mouse_dx);
      $('#mouse').html('Mouse X0: '+mouse_x0+' Move: '+mouse_dx);
        var pic0_width=mouse_dx;
        if ( pic0_width >300) {pic0_width=300;}
        if ( mouse_dx < 0) {
        var pic1_width=300+mouse_dx;
        } else {
        var pic1_width=300-mouse_dx;
        }
        if ( pic1_width >300) {pic1_width=300;}
        var pic2_width=-mouse_dx;
        if ( pic2_width >300) {pic2_width=300;}
        $('#pic0').css({'width': pic0_width });
        $('#pic1').css({'width': pic1_width +'px'});
        $('#pic2').css({'width': pic2_width +'px'});
    });
  });
  $(window).on('mouseup', function(e) {
     $(document).unbind('mousemove');
//     alert(parseInt($('#pic0').css('width')));
     if ( parseInt($('#mouse_dx').html()) > 150) {
 //      alert('pic0 > 150');
        $('#pic1').css({'width': 0}).hide();
        $('#pic0').animate({'width': 300}, function() {
          $('#pic0').hide();
          $('#pic1').css({'width': 300, 'background': img1+img_params, 'background-size': '300px'}).show();  
          $('#pic0').css({'width': '0px'}).show();
          });
     } else    if ( parseInt($('#mouse_dx').html()) < -150) {
 //     ...