<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Before & After Slider (No jQuery)</title> <style> * { box-sizing: border-box; } body { margin: 0; padding: 0; background: #111; font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; } .ba-slider { position: relative; max-width: 800px; width: 100%; overflow: hidden; cursor: ew-resize; } .ba-slider img { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; } .resize { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; } .resize img { position: absolute; top: 0; left: 0; } .handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: #fff; z-index: 2; transform: translateX(-50%); } </style> </head> <body> <div class="ba-slider" id="slider"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photo-before.jpg" alt="Before"> <div class="resize" id="resize"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photo-after.jpg" alt="After"> </div> <div class="handle" id="handle"></div> </div> <script> const slider = document.getElementById('slider'); const handle = document.getElementById('handle'); const resize = document.getElementById('resize'); let dragging = false; slider.addEventListener('mousedown', (e) => { dragging = true; }); document.addEventListener('mouseup', () => { dragging = false; }); document.addEventListener('mousemove', (e) => { if (!dragging) return; let rect = slider.getBoundingClientRect(); let offsetX = e.clientX - rect.left; if (offsetX < 0) offsetX = 0; if (offsetX > rect.width) offsetX = rect.width; let percent = (offsetX / rect.width) * 100; handle.style.left = percent + '%'; resize.style.width = percent + '%'; }); // Touch support slider.addEventListener('touchstart', (e) => { dragging = true; }); document.addEventListener('touchend', () => { dragging = false; }); document.addEventListener('touchmove', (e) => { if (!dragging) return; let touch = e.touches[0]; let rect = slider.getBoundingClientRect(); let offsetX = touch.clientX - rect.left; if (offsetX < 0) offsetX = 0; if (offsetX > rect.width) offsetX = rect.width; let percent = (offsetX / rect.width) * 100; handle.style.left = percent + '%'; resize.style.width = percent + '%'; }); </script> </body> </html> HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Before & After Slider (No jQuery)</title> <style> * { box-sizing: border-box; } body { margin: 0; padding: 0; background: #111; font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; } .ba-slider { position: relative; max-width: 800px; width: 100%; overflow: hidden; cursor: ew-resize; } .ba-slider img { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; } .resize { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; } .resize img { position: absolute; top: 0; left: 0; } .handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: #fff; z-index: 2; transform: translateX(-50%); } </style> </head> <body> <div class="ba-slider" id="slider"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photo-before.jpg" alt="Before"> <div class="resize" id="resize"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photo-after.jpg" alt="After"> </div> <div class="handle" id="handle"></div> </div> <script> const slider = document.getElementById('slider'); const handle = document.getElementById('handle'); const resize = document.getElementById('resize'); let dragging = false; slider.addEventListener('mousedown', (e) => { dragging = true; }); document.addEventListener('mouseup', () => { dragging = false; }); document.addEventListener('mousemove', (e) => { if (!dragging) return; let rect = slider.getBoundingClientRect(); let offsetX = e.clientX - rect.left; if (offsetX < 0) offsetX = 0; if (offsetX > rect.width) offsetX = rect.width; let percent = (offsetX / rect.width) * 100; handle.style.left = percent + '%'; resize.style.width = percent + '%'; }); // Touch support slider.addEventListener('touchstart', (e) => { dragging = true; }); document.addEventListener('touchend', () => { dragging = false; }); document.addEventListener('touchmove', (e) => { if (!dragging) return; let touch = e.touches[0]; let rect = slider.getBoundingClientRect(); let offsetX = touch.clientX - rect.left; if (offsetX < 0) offsetX = 0; if (offsetX > rect.width) offsetX = rect.width; let percent = (offsetX / rect.width) * 100; handle.style.left = percent + '%'; resize.style.width = percent + '%'; }); </script> </body> </html> код с инета в два клика нашел. картинки поменяешь и все