T.V
- Comparison sliders allow users to quickly compare 2 images (usually a before-after kind, but not necessarily). They can be dragged to show less of the before image and more of the after image, and vice versa. Here's how to make your own interactive comparison slider.
Or, in the campaign below, move the white slider to compare images:
Comparison sliders are perfect for certain scenarios such as showing transformations to your clients: makeup and looks, landmarks over time (e.g. growth of a city skyline), websites before and after redesigns, kitchen remodel, and many more. It does not have to be about timelines (before and after), but also for a creative comparison between products for instance.
Create an image comparison slider for your campaign
Follow the instructions below for creating and using your slider.
Step 1) Create your Qualifio campaign
Step 2) Get the links to the images you'd like to compare
In case you have nowhere to host your before and after photos, you can upload them to Qualifio > Documents > Multimedia Library.
Step 3) Add a bit of code
You don't need to know code to use this slider. However, to configure your image comparison slider, you will have to replace the image links with your own. Don't worry, this cannot get any simpler!
1. You can start by copying the code below:
<div id="slider"><img alt="Before" src="//files.qualifio.com//library/product_team_0/images/2019/tab/slider-friends-quiz-colour.jpg" style="width: 594px; height: 446px;" /> <img alt="After" src="//files.qualifio.com//library/product_team_0/images/2019/tab/slider-friends-quiz-grey.jpg" style="width: 594px; height: 446px;" /></div>
Then paste it in your campaign and insert your own image links. Don't forget to adjust the size (width and height), too!
Note: You can add your slider anywhere in your campaign but in the Rules, Winners or Contact tabs. We also recommend you not to use the recap with correct answers in the exit screen if you used sliders to illustrate questions.
2. Copy this second code into Look & Feel > Advanced Settings > CSS:
.before-after{position:relative;display:inline-block;vertical-align:top;user-select:none;max-width:100%}.before-after .photo img{display:block;max-width:100%;height:auto}.before-after .photo.before{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;transform:translate(-50%)}.before-after .photo.before img,.before-after .photo.before .layer{transform:translate(50%)}.before-after .drag-handler{width:5px;background-color:#fff;margin:0 0 0 -2px;position:absolute;left:50%;top:0;height:100%;opacity:.25}.before-after .drag-handler .drag-element{position:absolute;left:-16px;top:50%;width:38px;height:38px;margin:-16px 0 0 0;background-color:#fff;cursor:col-resize;border-radius:100%;-webkit-border-radius:100%}.before-after:hover .drag-handler{opacity:1}
3. Finally, copy this third code into Look & Feel > Advanced Settings > JS:
var BeforeAfter=(function(){function a(b){this.handler=b;if(this.checkHandlerExist()&&this.checkImagesExist()){this.init();this.bindEvents()}}a.prototype.init=function(){this.wrapHandler();this.wrapImages();this.createHandler()};a.prototype.wrapHandler=function(){var c=this.getHandler().innerHTML;var b=document.createElement("div");b.className="before-after";b.innerHTML=c;this.getHandler().innerHTML=b.outerHTML};a.prototype.wrapImages=function(){var b=this.getImages();for(var d=0,c=b.length;d<c;d++){b[d].outerHTML=this.getWrappedImage(b[d].outerHTML,d)}};a.prototype.getWrappedImage=function(d,c){var b=document.createElement("div");b.className="photo";b.innerHTML=d;if(c===0){b.className+=" before"}else{b.className+=" after"}return b.outerHTML};a.prototype.createHandler=function(){var d=this.getHandler().querySelector(".before-after");var c=document.createElement("div");c.className="drag-handler";c.draggable=true;var b=document.createElement("div");b.className="drag-element";c.appendChild(b);d.innerHTML+=c.outerHTML};a.prototype.checkHandlerExist=function(){return this.getHandler()!==undefined};a.prototype.checkImagesExist=function(){return this.getImages().length===2};a.prototype.getImages=function(){var b=this.getHandler().querySelectorAll("img");if(b.length===0){return this.getHandler().querySelectorAll(".layer")}return b};a.prototype.bindEvents=function(){var b=this;"mousedown touchstart".split(" ").forEach(function(c){b.getDragHandler().addEventListener(c,function(d){d.preventDefault();d.stopPropagation();b.markDragStart()})});"mouseup touchend".split(" ").forEach(function(c){document.addEventListener(c,function(){b.markDragStop()})});"mousemove touchmove".split(" ").forEach(function(c){b.getContainer().addEventListener(c,function(f){if(b.isDragStart()){var d=c==="touchmove"?f.changedTouches[0].clientX:f.clientX;b.update(d)}})})};a.prototype.getHandler=function(){return this.handler};a.prototype.getContainer=function(){return this.getHandler().querySelector(".before-after")};a.prototype.getDragHandler=function(){return this.getHandler().querySelector(".drag-handler")};a.prototype.getDragHandlerOffsetX=function(){return this.getDragHandler().offsetLeft};a.prototype.getPositionByOffset=function(c){var d=(c-this.getHandlerOffsetX())*100/this.getImagesWidth();var b=null;if(d<0){b=0}else{if(d>100){b=100}else{b=d}}return b};a.prototype.update=function(c){var b=this.getPositionByOffset(c);this.updateDragHandlerPosition(b);this.updatePhotoBefore(b)};a.prototype.updateDragHandlerPosition=function(b){this.getDragHandler().style.left=b+"%"};a.prototype.updatePhotoBefore=function(b){var d=this.getPhotoBefore();var c=this.getPhotoBeforeImage();var e=100-b;d.style.transform="translate("+(-1*e)+"%)";c.style.transform="translate("+e+"%)"};a.prototype.getPhotoBefore=function(){return this.getHandler().querySelector(".photo.before")};a.prototype.getPhotoBeforeImage=function(){var b=this.getPhotoBefore().querySelector("img");if(b===null){return this.getPhotoBefore().querySelector(".layer")}return b};a.prototype.getImagesWidth=function(){return this.getHandler().querySelector(".before-after").offsetWidth};a.prototype.getHandlerOffsetX=function(){return this.getHandler().getBoundingClientRect().left};a.prototype.markDragStart=function(){this.dragStart=true};a.prototype.markDragStop=function(){this.dragStart=false};a.prototype.isDragStart=function(){return this.dragStart===true};return a})();document.addEventListener("DOMContentLoaded",function(){var a=new BeforeAfter(document.querySelector("#slider"))});
Step 4) Preview your slider
You can see how the slider looks in your campaign thanks to our Preview mode.
The slider is responsive and works for all devices. Its touch-friendly structure makes it optimal for mobile view!
Tips & tricks
- Use images that are the same size.
- The slider only has 2 layers. It is not possible to compare the differences among 3 layered images.
- The slider has a vertical orientation. It is not possible to make it horizontal.
- There is no limitation to the number of sliders you can use in one campaign. However, you can only use one slider on each campaign page.
So, there you have it. We hope it will save you some time, and that you will use this slider in your campaigns.