Drap and Drop До и после при перемещении стрелки

(function (document, window) { 
 
  var juxtapose = { 
    sliders: [], 
    OPTIMIZATION_ACCEPTED: 1, 
    OPTIMIZATION_WAS_CONSTRAINED: 2 
  }; 
 
  var flickr_key = "d90fc2d1f4acc584e08b8eaea5bf4d6c"; 
  var FLICKR_SIZE_PREFERENCES = ['Large', 'Medium']; 
 
  function Graphic(properties, slider) { 
    var self = this; 
    this.image = new Image(); 
 
    this.loaded = false; 
    this.image.onload = function() { 
      self.loaded = true; 
      slider._onLoaded(); 
    }; 
 
    this.image.src = properties.src; 
    this.label = properties.label || false; 
    this.credit = properties.credit || false; 
  } 
 
  function FlickrGraphic(properties, slider) { 
    var self = this; 
    this.image = new Image(); 
 
    this.loaded = false; 
    this.image.onload = function() { 
      self.loaded = true; 
      slider._onLoaded(); 
    }; 
 
    this.flickrID = this.getFlickrID(properties.src); 
    this.callFlickrAPI(this.flickrID, self); 
 
    this.label = properties.label || false; 
    this.credit = properties.credit || false; 
  } 
 
  FlickrGraphic.prototype = { 
    getFlickrID: function(url) { 
      var idx = url.indexOf("flickr.com/photos/"); 
      var pos = idx + "flickr.com/photos/".length; 
      var photo_info = url.substr(pos); 
      if (photo_info.indexOf('/') == -1) return null; 
      if (photo_info.indexOf('/') === 0) photo_info = photo_info.substr(1); 
      id = photo_info.split("/")[1]; 
      return id; 
    }, 
 
    callFlickrAPI: function(id, self) { 
      var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes' + 
          '&api_key=' + flickr_key + 
          '&photo_id=' + id + '&format=json&nojsoncallback=1'; 
 
      var request = new XMLHttpRequest(); 
      request.open('GET', url, true); 
      request.onload = function() { 
        if (request.status >= 200 && request.status < 400){ 
          data = JSON.parse(request.responseText); 
          var flickr_url = self.bestFlickrUrl(data.sizes.size); 
          self.setFlickrImage(flickr_url); 
        } else { 
          console.error("There was an error getting the picture from Flickr"); 
        } 
      }; 
      request.onerror = function() { 
        console.error("There was an error getting the picture from Flickr"); 
      }; 
      request.send(); 
    }, 
 
    setFlickrImage: function(src) { 
      this.image.src = src; 
    }, 
 
    bestFlickrUrl: function(ary) { 
      var dict = {}; 
      for (var i = 0; i < ary.length; i++) { 
        dict[ary[i].label] = ary[i].source; 
      } 
      for (var j = 0; j < FLICKR_SIZE_PREFERENCES.length; j++) { 
        if (FLICKR_SIZE_PREFERENCES[j] in dict) { 
          return dict[FLICKR_SIZE_PREFERENCES[j]]; 
        } 
      } 
      return ary[0].source; 
    } 
  }; 
 
  function getNaturalDimensions(DOMelement) { 
    if (DOMelement.naturalWidth && DOMelement.naturalHeight) { 
      return {width: DOMelement.naturalWidth, height: DOMelement.naturalHeight}; 
    } 
    
    var img = new Image(); 
    img.src = DOMelement.src; 
    return {width: img.width, height: img.height}; 
  } 
 
  function getImageDimensions(img) { 
    var dimensions = { 
      width: getNaturalDimensions(img).width, 
      height: getNaturalDimensions(img).height, 
      aspect: function() { return (this.width / this.height); } 
    }; 
    return dimensions; 
  } 
 
  function addClass(element, c) { 
    if (element.classList) { 
      element.classList.add(c); 
    } else { 
      element.className += " " + c; 
    } 
  } 
 
  function removeClass(element, c) { 
    element.className = element.className.replace(/(\S+)\s*/g, function (w, match) { 
      if (match === c) { 
        return ''; 
      } 
      return w; 
    }).replace(/^\s+/, ''); 
  } 
 
  function setText(element, text) { 
    if (document.body.textContent) { 
      element.textContent = text; 
    } else { 
      element.innerText = text; 
    } 
  } 
 
  function getComputedWidthAndHeight(element) { 
    if (window.getComputedStyle) { 
      return { 
        width: parseInt(getComputedStyle(element).width, 10), 
        height: parseInt(getComputedStyle(element).height, 10) 
      }; 
    } else { 
      w = element.getBoundingClientRect().right - element.getBoundingClientRect().left; 
      h = element.getBoundingClientRect().bottom - element.getBoundingClientRect().top; 
      return { 
        width: parseInt(w, 10) || 0, 
        height: parseInt(h, 10) || 0 
      }; 
    } 
  } 
 
  function viewport() { 
    var e = window, a = 'inner'; 
    if ( !( 'innerWidth' in window ) ) { 
      a = 'client'; 
      e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] } 
  } 
 
  function getPageX(e) { 
    var pageX; 
    if (e.pageX) { 
      pageX = e.pageX; 
    } else if (e.touches) { 
      pageX = e.touches[0].pageX; 
    } else { 
      pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
    } 
    return pageX; 
  } 
 
  function getPageY(e) { 
    var pageY; 
    if (e.pageY) { 
      pageY = e.pageY; 
    } else if (e.touches) { 
      pageY = e.touches[0].pageY; 
    } else { 
      pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 
    return pageY; 
  } 
 
  function checkFlickr(url) { 
    var idx = url.indexOf("flickr.com/photos/"); 
    if (idx == -1) { 
      return false; 
    } else { 
      return true; 
    } 
  } 
 
  function getLeftPercent(slider, input) { 
    if (typeof(input) === "string" || typeof(input) === "number") { 
      leftPercent = parseInt(input, 10); 
    } else { 
      var sliderRect = slider.getBoundingClientRect(); 
      var offset = { 
        top: sliderRect.top + document.body.scrollTop, 
        left: sliderRect.left + document.body.scrollLeft 
      }; 
      var width = slider.offsetWidth; 
      var pageX = getPageX(input); 
      var relativeX = pageX - offset.left; 
      leftPercent = (relativeX / width) * 100; 
    } 
    return leftPercent; 
  } 
 
  function getTopPercent(slider, input) { 
    if (typeof(input) === "string" || typeof(input) === "number") { 
      topPercent = parseInt(input, 10); 
    } else { 
      var sliderRect = slider.getBoundingClientRect(); 
      var offset = { 
        top: sliderRect.top + document.body.scrollTop, 
        left: sliderRect.left + document.body.scrollLeft 
      }; 
      var width = slider.offsetHeight; 
      var pageY = getPageY(input); 
      var relativeY = pageY - offset.top; 
      topPercent = (relativeY / width) * 100; 
    } 
    return topPercent; 
  } 
  var BOOLEAN_OPTIONS =  {'animate': true, 'showLabels': true, 'showCredits': true, 'makeResponsive': true }; 
  function interpret_boolean(x) { 
    if (typeof(x) != 'string') { 
      return Boolean(x); 
    } 
    return !(x === 'false' || x === ''); 
  } 
 
  function JXSlider(selector, images, options) { 
    this.selector = selector; 
 
    var i; 
    this.options = { // конфигурации надо писать суда 
      animate: true, 
      showLabels: true, 
      showCredits: false, 
      makeResponsive: false, 
      startingPosition: "50%", 
      mode: 'horizontal', 
      callback: null // суда можно вставить каллбек функцию если надо 
    }; 
 
    for (i in this.options) { 
      if(i in options) { 
        if (i in BOOLEAN_OPTIONS) { 
          this.options[i] = interpret_boolean(options[i]); 
        } else { 
          this.options[i] = options[i]; 
        } 
      } 
    } 
 
    if (images.length == 2) { 
 
      if(checkFlickr(images[0].src)) { 
        this.imgBefore = new FlickrGraphic(images[0], this); 
      } else { 
        this.imgBefore = new Graphic(images[0], this); 
      } 
 
      if(checkFlickr(images[1].src)) { 
        this.imgAfter = new FlickrGraphic(images[1], this); 
      } else { 
        this.imgAfter = new Graphic(images[1], this); 
      } 
 
    } else { 
      console.warn("The images parameter takes two Image objects."); 
    } 
 
    if (this.imgBefore.credit || this.imgAfter.credit) { 
      this.options.showCredits = true; 
    } else { 
      this.options.showCredits = false; 
    } 
  } 
 
  JXSlider.prototype = { 
 
    updateSlider: function(input, animate) { 
      var leftPercent, rightPercent; 
 
      if (this.options.mode === "vertical") { 
        leftPercent = getTopPercent(this.slider, input); 
      } else { 
        leftPercent = getLeftPercent(this.slider, input); 
      } 
 
      leftPercent = leftPercent.toFixed(2) + "%"; 
      leftPercentNum = parseFloat(leftPercent); 
      rightPercent = (100 - leftPercentNum) + "%"; 
 
      if (leftPercentNum > 0 && leftPercentNum < 100) { 
        removeClass(this.handle, 'transition'); 
        removeClass(this.rightImage, 'transition'); 
        removeClass(this.leftImage, 'transition'); 
 
        if (this.options.animate && animate) { 
          addClass(this.handle, 'transition'); 
          addClass(this.leftImage, 'transition'); 
          addClass(this.rightImage, 'transition'); 
        } 
 
        if (this.options.mode === "vertical") { 
          this.handle.style.top = leftPercent; 
          this.leftImage.style.height = leftPercent; 
          this.rightImage.style.height = rightPercent; 
        } else { 
          this.handle.style.left = leftPercent; 
          this.leftImage.style.width = leftPercent; 
          this.rightImage.style.width = rightPercent; 
        } 
        this.sliderPosition = leftPercent; 
      } 
    }, 
 
    getPosition: function() { 
      return this.sliderPosition; 
    }, 
 
    displayLabel: function(element, labelText) { 
      label = document.createElement("div"); 
      label.className = 'jx-label'; 
      label.setAttribute('tabindex', 0);  
      setText(label, labelText); 
      element.appendChild(label); 
    }, 
 
    displayCredits: function() { 
      credit = document.createElement("div"); 
      credit.className = "jx-credit"; 
      text = "<em>Photo Credits:</em>"; 
      if (this.imgBefore.credit) { text += " <em>Before</em> " + this.imgBefore.credit; } 
      if (this.imgAfter.credit) { text += " <em>After</em> " + this.imgAfter.credit; } 
 
      credit.innerHTML = text; 
 
      this.wrapper.appendChild(credit); 
    }, 
 
    setStartingPosition: function(s) { 
      this.options.startingPosition = s; 
    }, 
 
    checkImages: function() { 
      if (getImageDimensions(this.imgBefore.image).aspect() == 
        getImageDimensions(this.imgAfter.image).aspect()) { 
        return true; 
      } else { 
        return false; 
      } 
    }, 
 
    calculateDims: function(width, height){ 
      var ratio = getImageDimensions(this.imgBefore.image).aspect(); 
      if (width) { 
        height = width / ratio; 
      } else if (height) { 
        width = height * ratio; 
      } 
      return { 
        width: width, 
        height: height, 
        ratio: ratio 
      }; 
    }, 
 
    responsivizeIframe: function(dims){ 
      if (dims.height < window.innerHeight){ 
 
        if (dims.ratio >= 1){ 
          this.wrapper.style.paddingTop = parseInt((window.innerHeight - dims.height) / 2) + "px"; 
        } 
      } else if (dims.height > window.innerHeight) { 
 
        dims = this.calculateDims(0, window.innerHeight); 
        this.wrapper.style.paddingLeft = parseInt((window.innerWidth - dims.width) / 2) + "px"; 
      } 
      if (this.options.showCredits) { 
        dims.height -= 13; 
      } 
      return dims; 
    }, 
 
    setWrapperDimensions: function() { 
      var wrapperWidth = getComputedWidthAndHeight(this.wrapper).width; 
      var wrapperHeight = getComputedWidthAndHeight(this.wrapper).height; 
      var dims = this.calculateDims(wrapperWidth, wrapperHeight); 
      if (window.location !== window.parent.location && !this.options.makeResponsive) { 
        dims = this.responsivizeIframe(dims); 
      } 
      this.wrapper.style.height = parseInt(dims.height) + "px"; 
      this.wrapper.style.width = parseInt(dims.width) + "px"; 
    }, 
 
    optimizeWrapper: function(maxWidth){ 
      var result = juxtapose.OPTIMIZATION_ACCEPTED; 
      if ((this.imgBefore.image.naturalWidth >= maxWidth) && (this.imgAfter.image.naturalWidth >= maxWidth)) { 
        this.wrapper.style.width = maxWidth + "px"; 
        result = juxtapose.OPTIMIZATION_WAS_CONSTRAINED; 
      } else if (this.imgAfter.image.naturalWidth < maxWidth) { 
        this.wrapper.style.width = this.imgAfter.image.naturalWidth + "px"; 
      } else { 
        this.wrapper.style.width = this.imgBefore.image.naturalWidth + "px"; 
      } 
      this.setWrapperDimensions(); 
      return result; 
    }, 
 
    _onLoaded: function() { 
 
      if (this.imgBefore && this.imgBefore.loaded === true && 
        this.imgAfter && this.imgAfter.loaded === true) { 
 
        this.wrapper = document.querySelector(this.selector); 
        addClass(this.wrapper, 'juxtapose'); 
 
        this.wrapper.style.width = getNaturalDimensions(this.imgBefore.image).width; 
        this.setWrapperDimensions(); 
 
        this.slider = document.createElement("div"); 
        this.slider.className = 'jx-slider'; 
        this.wrapper.appendChild(this.slider); 
 
        if (this.options.mode != "horizontal")  addClass(this.slider, this.options.mode); 
 
        this.handle = document.createElement("div"); 
        this.handle.className = 'jx-handle'; 
 
        this.rightImage = document.createElement("div"); 
        this.rightImage.className = 'jx-image jx-right'; 
        this.rightImage.appendChild(this.imgAfter.image); 
 
 
        this.leftImage = document.createElement("div"); 
        this.leftImage.className = 'jx-image jx-left'; 
        this.leftImage.appendChild(this.imgBefore.image); 
 
        this.labCredit = document.createElement("a"); 
        this.labCredit.setAttribute('target', '_blank'); 
        this.labCredit.className = 'jx-knightlab'; 
        this.labLogo = document.createElement("div"); 
        this.labLogo.className = 'knightlab-logo'; 
        this.labCredit.appendChild(this.labLogo); 
        this.projectName = document.createElement("span"); 
        this.projectName.className = 'juxtapose-name'; 
        setText(this.projectName, ''); 
        this.labCredit.appendChild(this.projectName); 
 
        this.slider.appendChild(this.handle); 
        this.slider.appendChild(this.leftImage); 
        this.slider.appendChild(this.rightImage); 
        this.slider.appendChild(this.labCredit); 
 
        this.leftArrow = document.createElement("div"); 
        this.rightArrow = document.createElement("div"); 
        this.control = document.createElement("div"); 
        this.controller = document.createElement("div"); 
 
        this.leftArrow.className = 'jx-arrow jx-left'; 
        this.rightArrow.className = 'jx-arrow jx-right'; 
        this.control.className = 'jx-control'; 
        this.controller.className = 'jx-controller'; 
 
        this.controller.setAttribute('tabindex', 0);  
        this.controller.setAttribute('role', 'slider'); 
        this.controller.setAttribute('aria-valuenow', 50); 
        this.controller.setAttribute('aria-valuemin', 0); 
        this.controller.setAttribute('aria-valuemax', 100); 
 
        this.handle.appendChild(this.leftArrow); 
        this.handle.appendChild(this.control); 
        this.handle.appendChild(this.rightArrow); 
        this.control.appendChild(this.controller); 
 
        this._init(); 
      } 
    }, 
 
    _init: function() { 
      if (this.checkImages() === false) { 
        console.warn(this, "Check that the two images have the same aspect ratio for the slider to work correctly."); 
      } 
 
      this.updateSlider(this.options.startingPosition, false); 
 
      if (this.options.showLabels === true) { 
        if (this.imgBefore.label) { this.displayLabel(this.leftImage, this.imgBefore.label); } 
        if (this.imgAfter.label) { this.displayLabel(this.rightImage, this.imgAfter.label); } 
      } 
      if (this.options.showCredits === true) this.displayCredits(); 
 
      var self = this; 
      window.addEventListener("resize", () => self.setWrapperDimensions()); 
 
      this.slider.addEventListener("mousedown", function(e) { 
        e = e || window.event; 
        e.preventDefault(); 
        self.updateSlider(e, true); 
        animate = true; 
 
        this.addEventListener("mousemove", function(e) { 
          e = e || window.event; 
          e.preventDefault(); 
          if (animate) { self.updateSlider(e, false); } 
        }); 
 
        this.addEventListener('mouseup', function(e) { 
          e = e || window.event; 
          e.preventDefault(); 
          e.stopPropagation(); 
          this.removeEventListener('mouseup', arguments.callee); 
          animate = false; 
        }); 
      }); 
      //тач-события для смартфонов и для тач девайсов 
      this.slider.addEventListener("touchstart", function(e) { 
        e = e || window.event; 
        e.preventDefault(); 
        e.stopPropagation(); 
        self.updateSlider(e, true); 
         //тач-события для смартфонов и для тач девайсов 
        this.addEventListener("touchmove", function(e) { 
          e = e || window.event; 
          e.preventDefault(); 
          e.stopPropagation(); 
          self.updateSlider(event, false); 
        }); 
      }); 
      //менять видимость правой картинки  
      this.leftImage.addEventListener("keydown", function (event) { 
           var key = event.which || event.keyCode; 
            if ((key == 13) || (key ==32)) { 
              self.updateSlider("90%", true); 
                self.controller.setAttribute('aria-valuenow', 90); 
            } 
      }); 
      //менять видимость левой картинки  
      this.rightImage.addEventListener("keydown", function (event) { 
           var key = event.which || event.keyCode; 
            if ((key == 13) || (key ==32)) { 
            self.updateSlider("10%", true); 
            self.controller.setAttribute('aria-valuenow', 10); 
            } 
      }); 
      juxtapose.sliders.push(this); 
 
      if (this.options.callback && typeof(this.options.callback) == 'function') { 
        this.options.callback(this); 
      } 
    } 
  }; 
  juxtapose.makeSlider = function (element, idx) { 
    if (typeof idx == 'undefined') idx = juxtapose.sliders.length;  
     
    var w = element; 
    var images = w.querySelectorAll('img'); 
    var options = {}; 
 
    if (w.getAttribute('data-animate'))  options.animate = w.getAttribute('data-animate'); 
    if (w.getAttribute('data-showlabels'))  options.showLabels = w.getAttribute('data-showlabels'); 
    if (w.getAttribute('data-showcredits')) options.showCredits = w.getAttribute('data-showcredits'); 
    if (w.getAttribute('data-startingposition')) options.startingPosition = w.getAttribute('data-startingposition'); 
    if (w.getAttribute('data-mode'))  options.mode = w.getAttribute('data-mode'); 
    if (w.getAttribute('data-makeresponsive'))  options.mode = w.getAttribute('data-makeresponsive'); 
 
    specificClass = 'juxtapose-' + idx; 
    addClass(element, specificClass); 
 
    selector = '.' + specificClass;   
    w.innerHTML ?  w.innerHTML = '' : w.innerText = ''; 
 
    slider = new juxtapose.JXSlider( 
      selector, 
      [ 
        { 
          src: images[0].src, 
          label: images[0].getAttribute('data-label'), 
          credit: images[0].getAttribute('data-credit') 
        }, 
        { 
          src: images[1].src, 
          label: images[1].getAttribute('data-label'), 
          credit: images[1].getAttribute('data-credit') 
        } 
      ], 
      options 
    ); 
  }; 
 
  //Enable HTML Implementation 
  juxtapose.scanPage = function() { 
      var elements = document.querySelectorAll('.juxtapose'); 
      for (var i = 0; i < elements.length; i++) { 
      juxtapose.makeSlider(elements[i], i); 
    } 
  }; 
 
  juxtapose.JXSlider = JXSlider; 
  window.juxtapose = juxtapose; 
 
  juxtapose.scanPage(); 
 
}(document, window));

.juxtapose { max-width: 80%;} 
 
div.juxtapose { 
	width: 100%; 
} 
 
div.jx-slider { 
	width: 100%; 
	height: 100%; 
	position: relative; 
	overflow: hidden; 
	cursor: pointer; 
} 
div.jx-handle { 
	position: absolute; 
	height: 100%; 
	width: 40px; 
	cursor: col-resize; 
	z-index: 15; 
	margin-left: -20px; 
} 
 
div.jx-arrow { 
    display: none; 
} 
.vertical div.jx-handle { 
	height: 40px; 
	width: 100%; 
	cursor: row-resize; 
	margin-top: -20px; 
	margin-left: 0; 
} 
 
div.jx-control { 
	height: 100%; 
	margin-right: auto; 
	margin-left: auto; 
	width: 3px; 
	background-color: #ffffff; 
} 
 
.vertical div.jx-control { 
	height: 3px; 
	width: 100%; 
	background-color: #f3f3f3; 
	position: relative; 
	top: 50%; 
	transform: translateY(-50%); 
} 
 
div.jx-controller { 
	position: absolute; 
	margin: auto; 
	top: 0; 
	bottom: 0; 
	height: 60px; 
	width: 9px; 
	margin-left: -3px; 
	background-color: #f3f3f3; 
} 
 
.vertical div.jx-controller { 
	height: 9px; 
	width: 100px; 
	margin-left: auto; 
	margin-right: auto; 
	top: -3px; 
	position: relative; 
} 
 
div.jx-arrow { 
	position: absolute; 
	margin: auto; 
	top: 0; 
	bottom: 0;  
	width: 0; 
	height: 0; 
	transition: all .2s ease; 
} 
 
.vertical div.jx-arrow { 
	position: absolute; 
	margin: 0 auto; 
	left: 0; 
	right: 0;  
	width: 0; 
	height: 0; 
	transition: all .2s ease; 
} 
 
 
div.jx-arrow.jx-left { 
	left: 2px; 
	border-style: solid; 
	border-width: 8px 8px 8px 0; 
	border-color: transparent #f3f3f3 transparent transparent; 
} 
 
div.jx-arrow.jx-right { 
	right: 2px; 
	border-style: solid; 
	border-width: 8px 0 8px 8px; 
	border-color: transparent transparent transparent #f3f3f3; 
} 
 
.vertical div.jx-arrow.jx-left { 
	left: 0px; 
	top: 2px; 
	border-style: solid; 
	border-width: 0px 8px 8px 8px; 
	border-color: transparent transparent #f3f3f3 transparent; 
} 
 
.vertical div.jx-arrow.jx-right { 
	right: 0px; 
	top: initial; 
	bottom: 2px; 
	border-style: solid; 
	border-width: 8px 8px 0 8px; 
	border-color: #f3f3f3 transparent transparent transparent; 
} 
 
div.jx-handle:hover div.jx-arrow.jx-left, 
div.jx-handle:active div.jx-arrow.jx-left { 
	left: -1px; 
} 
 
div.jx-handle:hover div.jx-arrow.jx-right,  
div.jx-handle:active div.jx-arrow.jx-right { 
	right: -1px; 
} 
 
.vertical div.jx-handle:hover div.jx-arrow.jx-left, 
.vertical div.jx-handle:active div.jx-arrow.jx-left { 
	left: 0px; 
	top: 0px; 
} 
 
.vertical div.jx-handle:hover div.jx-arrow.jx-right,  
.vertical div.jx-handle:active div.jx-arrow.jx-right { 
	right: 0px; 
	bottom: 0px; 
} 
 
 
div.jx-image { 
	position: absolute; 
	height: 100%; 
	display: inline-block; 
	top: 0; 
	overflow: hidden; 
	-webkit-backface-visibility: hidden; 
} 
 
.vertical div.jx-image { 
	width: 100%; 
	left: 0; 
	top: initial; 
} 
 
div.jx-image img { 
	height: 100%; 
	z-index: 5; 
	position: absolute; 
 
	max-height: none; 
	max-width: none; 
	max-height: initial; 
	max-width: initial; 
} 
 
.vertical div.jx-image img { 
	height: initial; 
	width: 100%; 
} 
 
div.jx-image.jx-left { 
	left: 0; 
	background-position: left; 
} 
 
div.jx-image.jx-left img { 
	left: 0; 
} 
 
div.jx-image.jx-right { 
	right: 0; 
	background-position: right; 
} 
 
div.jx-image.jx-right img { 
	right: 0; 
	bottom: 0; 
} 
 
 
.veritcal div.jx-image.jx-left { 
	top: 0; 
	background-position: top; 
} 
 
.veritcal div.jx-image.jx-left img { 
	top: 0; 
} 
 
.vertical div.jx-image.jx-right { 
	bottom: 0; 
	background-position: bottom; 
} 
 
.veritcal div.jx-image.jx-right img { 
	bottom: 0; 
} 
 
 
div.jx-image div.jx-label { 
	font-size: 1em; 
	padding: .25em .75em; 
	position: relative; 
	display: inline-block; 
	top: 0; 
	background-color: #000; /* IE 8 */ 
	background-color: rgba(0,0,0,.7); 
	color: white; 
	z-index: 10; 
	white-space: nowrap; 
	line-height: 18px; 
	vertical-align: middle; 
} 
 
div.jx-image.jx-left div.jx-label { 
	float: left; 
	left: 0; 
} 
 
div.jx-image.jx-right div.jx-label { 
	float: right; 
	right: 0; 
} 
 
.vertical div.jx-image div.jx-label { 
	display: table; 
	position: absolute; 
} 
 
.vertical div.jx-image.jx-right div.jx-label { 
	left: 0; 
	bottom: 0; 
	top: initial; 
} 
 
div.jx-credit { 
	line-height: 1.1; 
	font-size: 0.75em; 
} 
 
div.jx-credit em { 
	font-weight: bold; 
	font-style: normal; 
} 
 
 
/* Animation */ 
 
div.jx-image.transition { 
	transition: width .5s ease; 
} 
 
div.jx-handle.transition { 
	transition: left .5s ease; 
} 
 
.vertical div.jx-image.transition { 
	transition: height .5s ease; 
} 
 
.vertical div.jx-handle.transition { 
	transition: top .5s ease; 
} 
 
div.jx-controller:focus, 
div.jx-image.jx-left div.jx-label:focus, 
div.jx-image.jx-right div.jx-label:focus, 
a.jx-knightlab:focus { 
	background: #eae34a; 
	color: #000; 
} 
a.jx-knightlab:focus span.juxtapose-name{ 
	color: #000; 
	border: none; 
}

<div class="juxtapose" data-startingposition="45%"> 
  <img src="http://placekitten.com/500/300" /> 
  <img src="http://placebear.com/500/300" /> 
</div>