Responsive & Accessible Before-After Slider

Before and After image slider is a powerful way to engage your audience. It’s a simple concept that is very easy for mobile users to digest. They’re also an incredibly effective way to showcase a variety of images in one place.

Despite the fact that image sliders are so easy to make, many businesses fail to create a good image slider. This is largely due to the fact that they’re not prepared to put in the work necessary to create a good image slider.

Read on to discover exactly how you can create a “before and after image slider” beer slider in under 30 minutes.

before & after image slider with vanilla JavaScript

Do you want to create image compression slider in vanilla JavaScript?

Setup your markup

<!-- slider -->

<div class="slider-container">
  <input type="range" value="50" max="100">
  <div class="slider"></div>
  <img class="before" src="https://www.w3schools.com/css/lights600x400.jpg">
  <div class="after"></div>
</div>

<!-- /slider -->

Now add some CSS to it.

/* */
.slider-container {
  display: flex;
  position: relative;
  width: 500px;
}

.slider {
  position: absolute;
  z-index: 100;
  cursor: ew-resize;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #03a9f4;
  border-radius: 25px;
}

input {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

input:focus + .slider {
  outline: -webkit-focus-ring-color auto 1px;
}

.before {
  position: relative;
  width: 100%;
  height: auto;
}

.after {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-image: url("https://www.w3schools.com/css/img_5terre.jpg");
  background-repeat: no-repeat;
  background-size: auto 100%;
}

/*  */

Add JavaScript to make it awesome.

//

let sliderContainer = document.querySelector(".slider-container");
let afterImage = sliderContainer.querySelector(".after");
let comparissonSlider = sliderContainer.querySelector(".slider");
let compInputRange = sliderContainer.querySelector("input");

comparissonSlider.addEventListener("mousedown", slideReady);
comparissonSlider.addEventListener("touchstart", slideReady);
compInputRange.addEventListener("input", inputToSlide);

function slideReady(e) {
  e.preventDefault();
  window.addEventListener("mousemove", slideMove);
  window.addEventListener("touchmove", slideMove);
  window.addEventListener("mouseup", slideFinish);
  window.addEventListener("touchend", slideFinish);
}
    
function slideFinish() {
  window.removeEventListener("mousemove", slideMove);
  window.removeEventListener("touchmove", slideMove);
  window.removeEventListener("mouseup", slideFinish);
  window.removeEventListener("touchend", slideFinish);
}

function slideMove(event) {
  let position = getCursorPos(event);
  if (position < 0) position = 0;
  if (position > sliderContainer.offsetWidth) position = sliderContainer.offsetWidth;
  slide(position);
}

function getCursorPos(event) {
  event = event || window.event;
  let boundingRect = afterImage.getBoundingClientRect();
  let positionX = event.pageX - boundingRect.left;
  positionX = positionX - window.pageXOffset;
  return positionX;
}

function slide(position) {
  afterImage.style.width = `${(position / sliderContainer.offsetWidth) * 100}%`;
  comparissonSlider.style.left = `${(afterImage.offsetWidth / sliderContainer.offsetWidth) * 100}%`;
  compInputRange.value = (position / sliderContainer.offsetWidth) * 100;
}

function inputToSlide() {
  afterImage.style.width = `${compInputRange.value}%`;
  comparissonSlider.style.left = `${compInputRange.value}%`;
}

//

Note: This above code is available on jsfiddle.net or Stackoverflow

Beer Slider ( before & after image slider ) plugin

Beer Slider is a simple JavaScript plugin that works with any browser.

Its primary use is to compare two versions of an image, such as the same object photographed at two distinct times.

It’s especially beneficial when it comes to photo settings for example Light-room presets, Photoshop actions, etc.

before and after image slider

How to install Beer Slider?

You can get the beer slider from GitHub and you can find the demo here.

Install using npm.

##
npm install beerslider
##

The basic setup looks like this.

<!-- -->

<head>
  ...
  <link rel="stylesheet" href="dist/BeerSlider.css">
</head>
<body>
  
  <!-- Bottom of body -->
  <script src="dist/BeerSlider.js"></script> <script> new BeerSlider(document.getElementById('slider')); </script>
</body> <!-- -->

Or You can use a CDN

 <!--  -->

<head>
  ...
  <link rel="stylesheet" href="https://unpkg.com/beerslider/dist/BeerSlider.css">
</head>
<body>
  
  <!-- Bottom of body -->
  <script src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script> <script> new BeerSlider(document.getElementById('slider')); </script>
</body> <!-- before and after image slider -->

How to use Beer Slider Plugin?

Create a basic markup with images you want.

 <!--  -->

<div id="slider" class="beer-slider" data-beer-label="before">
  <img src="../demo-assets/images/dogs-before.jpg" alt="">
  <div class="beer-reveal" data-beer-label="after">
    <img src="../demo-assets/images/dogs-after.jpg" alt="">
  </div>
</div>


 <!-- before and after image slider  -->

The data-beer-labels are optional, you can leave them blank or leave them out entirely.

Now activate the slider

//

new BeerSlider(document.getElementById('slider'));

//

How to use Beer Slider with JQuery or Zepto?

You can achieve something similar if you use jQuery or Zepto in your project and have  before-and-after sliders on your page:

create the basic markup like this :

 <!--  -->

<div id="beer-slider" class="beer-slider" data-beer-label="before" data-beer-start="25">
  <img src="man-hold-beer.jpg" alt="Original - Man holding beer">
  <div class="beer-reveal" data-beer-label="after">
    <img src="man-hold-beer-after.jpg" alt="Processed - Man holding beer">
  </div>
</div>
<div id="beer-slider2" class="beer-slider" data-beer-label="before" data-beer-start="75">
  <img src="man-hold-beer.jpg" alt="Original - Man holding beer">
  <div class="beer-reveal" data-beer-label="after">
    <img src="man-hold-beer-after.jpg" alt="Processed - Man holding beer">
  </div>
</div>


 <!-- before and after image slider  -->

Write your jQuery code for “before & after” image slider.

//

<script>
  $.fn.BeerSlider = function ( options ) {
    options = options || {};
    return this.each(function() {
      new BeerSlider(this, options);
    });
  };
  $('.beer-slider').BeerSlider({start: 25});
</script>
//

OR

//

<script>
  $.fn.BeerSlider = function ( options ) {
    options = options || {};
    return this.each(function() {
      new BeerSlider(this, options);
    });
  };
  $('.beer-slider').each( (function( index, el ) {
    $(el).BeerSlider({start: $(el).data('beer-start')})
  });
</script>
//

Note: A jQuery demo can be found here, while Zepto can be found here.

Similar Posts