Picture_slider_v1 - JSFiddle - JSFiddle - JSFiddle - JSFiddle - JSFiddle

by Norbert Wilms

HTML

<div id=gallery_head>Just a headline</div>
<div id=gallery_wrapper>
  <div class='placeholder' id='ph_left'>
      <div class='navi' id='gallery_dir_a'>&lt;</div>
  </div>
  <div id='gallery_picwrapper'>
    <div id="gallery_pic0"></div>
    <div id="gallery_pic1"></div>
    <div id="gallery_pic2"></div>
  </div>
  <div class='placeholder' id='ph_right'>
    <div class='navi' id='gallery_dir_b'>&gt;</div>
  </div>
</div>

CSS

#gallery_head {
  height: 50px;
  width: 700px;
  background-color: #ff4;
}
#gallery_wrapper {
  width: 800px;
  height: 400px;
  top: 0;
  left: 0;
  }
#gallery_picwrapper {
  position: relative; 
  float: left;
  width: 600px;
  height: 400px;  
}
#ph_right {
   position: relative;
   float: left;
   width: 50px;
   height: 400px;
}
#ph_left {
   position: relative;
   float: left;
   width: 55px;
   height: 400px;
}
.navi {
    background-color: #bbb;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 170px;
    border: 1px solid black;
    text-align: center;
    border-radius: 25px;
    font-size:40px;
}

JavaScript

var pic_no_act = 0;
var bilder = new Array (
       "https://farm4.staticflickr.com/3902/14985871946_24f47d4b53_h.jpg",
       "https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg",
       "https://farm4.staticflickr.com/3920/15008465772_d50c8f0531_h.jpg",
       "https://c1.staticflickr.com/4/3920/14507973335_308ac8f9ec_b.jpg",
       "https://c1.staticflickr.com/6/5628/20137790814_f80bbb5540_k.jpg",
       "https://c1.staticflickr.com/8/7198/6889472686_de1cd576ae_k.jpg",
       "https://c1.staticflickr.com/8/7486/15194165793_5824deace4_k.jpg",
       "https://c1.staticflickr.com/8/7582/15842593192_f7983dfd13_k.jpg"
       );
var img_params=" no-repeat center ";
var pic_height=400;
var pic_width=600;
var bg_size='auto 400px';

function show_pic(pic_no, pic_dir) {
//  alert('pic_no: '+pic_no+' pic_dir: '+ pic_dir);
  var prev_pic = pic_no -1;
  $('#gallery_pic0').css({'width': 0});
  $('#gallery_pic1').css({'width': pic_width});
  $('#gallery_pic2').css({'width': 0});
  if ( prev_pic < 0 ) { prev_pic = bilder.length -1; }
  var next_pic = pic_no +1;
  if ( next_pic > bilder.length -1) { next_pic = 0; }
  $('#gallery_pic1').css({'background': "url('"+bilder[pic_no]+"')"+img_params, 'background-size': bg_size });
  if (pic_dir == -1 ) {
    $('#gallery_pic0').css({'background': "url('"+bilder[next_pic]+"')"+img_params, 'background-size': bg_size });
    $('#gallery_pic1').animate({'width': 0});
    $('#gallery_pic0').animate({'width': pic_width});
    pic_no_act = next_pic;
  }  
  if (pic_dir == 1 ) {
    $('#gallery_pic2').css({'background': "url('"+bilder[prev_pic]+"')"+img_params, 'background-size': bg_size });
    $('#gallery_pic1').animate({'width': 0});
    $('#gallery_pic2').animate({'width': pic_width});
    pic_no_act = prev_pic;
  }
}

$(document).ready(function() {
  $('#gallery_pic0').css({'width': 0, 'height': pic_height, 'position': 'relative', 'float': 'left' });
  $('#gallery_pic1').css({'width': pic_width, 'height': pic_height,...