How to Create a Smooth Image Slider with Mouse Interaction in Less Than 5 Steps Using Pure HTML, CSS, and JavaScript (Free Code + Full Tutorial)

by
A responsive split-screen image slider with smooth mouse interaction, built using HTML, CSS, and JavaScript—perfect for modern web design.

Introduction:

A smooth image slider is an engaging UI element that divides the screen into two sections, allowing users to compare images interactively. It’s commonly used for showcasing before-and-after effects, product comparisons, or theme-based transitions. In this tutorial, we’ll create a fully responsive image slider with smooth mouse interaction using only HTML, CSS, and JavaScript—no external libraries required!

By the end of this tutorial, you’ll understand how to:

  • Structure the slider with HTML
  • Style it with CSS for a sleek design
  • Add smooth mouse-based interaction using JavaScript in steps by steps approach
  • Implement everything in less than 5 steps!

Setup and Requirements For Smooth Image Slider:

Before we begin, ensure you have the following:

✅ Requirements:

  • A basic understanding of HTML, CSS, and JavaScript.
  • A code editor like VS Code, Sublime Text, or Atom.
  • A modern web browser (Chrome, Firefox, Edge, etc.).
  • Basic knowledge of flexbox for styling.

📂 Folder Structure:

Smooth Image Slider

Create a project folder and set up the following files:

smooth-image-slider/
│── index.html  (Main HTML structure)
│── index.css   (CSS styles for layout & animations)
│── index.js    (JavaScript for interactive mouse movement)
│── img/
│   ├── image1.png  (First image)
│   ├── image2.png  (Second image)

By the end of this project, you’ll have a fully functional, interactive Smooth Image Slider animation that will captivate users and provide you with a deeper understanding for real-world applications.

Step1: HTML For Smooth Image Slider:

HTML Code

HTML
<html lang="en">
<head>
 <!-- create by aspirepages.in copyright 2025 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Split Screen Slider</title>
  <link rel="stylesheet" href="./index.css">
  <link rel="shortcut icon" href="img/final upscale.png" type="image/x-icon">
</head>
<body>
  <section id="wrapper" class="skewed">
    <div class="layer bottom">
      <div class="content-wrap">
        <div class="content-body">
          <h1>R15 Blue color</h1>
          <p>The Yamaha R15 V4 White and Blue is a stunning sports bike that blends aggressive styling with advanced technology, inspired by Yamaha’s flagship R1.</p>
        </div>
        <img src="./img/final.png" alt="">
      </div>
    </div>

    <div class="layer top">
        <div class="content-wrap">
          <div class="content-body">
            <h1>R15 white color</h1>
            <p>The 6-speed gearbox with an assist & slipper clutch ensures smooth gear shifts, while the USD front forks and aluminum swingarm provide excellent handling and stability. </p>
          </div>
          <img src="./img/final2.png" alt="">
        </div>
      </div>

      <div class="handle"></div>
  </section>
  <script src="./index.js"></script>
</body>
</html>

HTML Explanation:

  • section is the main container with id="wrapper", which holds the split-screen slider.
  • The class="skewed" is used for a skewed split effect via CSS.
    <div class="layer bottom">
  • div with class="layer bottom" represents the left side (background: dark color).
      <div class="content-wrap">
        <div class="content-body">
          <h1>R15 Blue color</h1>
          <p>The Yamaha R15 V4 White and Blue is a stunning sports bike...</p>
        </div>
        <img src="./img/final.png" alt="">
      </div>
    </div>
  • Contains a heading (h1), description (p), and an image (img) for the blue R15 bike.
htmlCopyEdit    <div class="layer top">
  • div with class="layer top" represents the right side (background: white).
        <div class="content-wrap">
          <div class="content-body">
            <h1>R15 white color</h1>
            <p>The 6-speed gearbox with an assist & slipper clutch...</p>
          </div>
          <img src="./img/final2.png" alt="">
        </div>
      </div>
  • Similar structure to the bottom layer, but for the white R15 bike.
   <div class="handle"></div>
  </section>
  • div class="handle" represents the sliding handle (yellow vertical bar) to control the split.
<script src="./index.js"></script>
</body>
</html>
  • Links the JavaScript file (index.js) to add interactive functionality.

Step 2 : CSS For Smooth Image Slider:

CSS Code

CSS

 /* create by aspirepages.in copyright 2025  */
body{
  margin:0;
  padding: 0;
  font-size: 100%;
  line-height: 1.6;
  font-family: Arial, Helvetica, sans-serif;
}
#wrapper{
  position: relative;
  width: 100%;
  min-height: 55vw;
  overflow: hidden;
}
.layer{
  position: absolute;
  width: 100vw;
  min-height: 55vw;
  overflow: hidden;
}
.layer .content-wrap{
  position: absolute;
  width: 100vw;
  min-height: 55vw;
}
.layer .content-body{
  width: 25%;
  position: absolute;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
  color: #FFF
}
.layer img{
  position: absolute;
  width: 35%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottom{
  background: #222;
  z-index: 1;
}
.bottom .content-body{
  right: 5%;
}
.bottom h1{
  color: #FDAB00;
}
.top{
  background:white;
  color: #1d1c1c;
  z-index: 2;
  width: 50vw;
}
.top .content-body{
  left: 5%;
  color:#222;
}
.handle{
  position: absolute;
  height: 100%;
  display: block;
  background-color: #FDAB00;
  width: 5px;
  top: 0;
  left: 50%;
  z-index: 3;
}
.skewed .handle{
  top: 50%;
  transform: rotate(30deg) translateY(-50%);
  height: 200%;
  transform-origin: top;
}
.skewed .top{
  transform: skew(-30deg);
  margin-left: -1000px;
  width: calc(50vw + 1000px);
}
.skewed .top .content-wrap{
  transform: skew(30deg);
  margin-left: 1000px
}
@media (max-width: 768px) {
  body {
    font-size: 75%;
  }
}

CSS Explanation:

  • position: relative; makes it a reference for absolutely positioned child elements.
  • width: 100% ensures it takes full width.
  • min-height: 55vw; makes it responsive.
.layer {
  position: absolute;
  width: 100vw;
  min-height: 55vw;
  overflow: hidden;
}
  • .layer (both top & bottom) covers the full screen.

Content Styling

.layer .content-wrap {
  position: absolute;
  width: 100vw;
  min-height: 55vw;
}
  • content-wrap fills the entire layer.
.layer .content-body {
  width: 25%;
  position: absolute;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
  color: #FFF;
}
  • Positions text in the center of each section.
  • color: #FFF; makes text white.
.layer img {
  position: absolute;
  width: 35%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  • Centers images horizontally and vertically.

Background Colors

.bottom {
  background: #222;
  z-index: 1;
}
.bottom .content-body {
  right: 5%;
}
.bottom h1 {
  color: #FDAB00;
}
  • The bottom layer has a dark background.
  • Headings are orange (#FDAB00).
.top {
  background: white;
  color: #1d1c1c;
  z-index: 2;
  width: 50vw;
}
.top .content-body {
  left: 5%;
  color:#222;
}
  • The top layer has a white background.
  • Takes 50% width (width: 50vw;).

Handle (Slider)

.handle {
  position: absolute;
  height: 100%;
  display: block;
  background-color: #FDAB00;
  width: 5px;
  top: 0;
  left: 50%;
  z-index: 3;
}
  • Thin yellow bar to slide between sections.

Skew Effect

.skewed .handle {
  top: 50%;
  transform: rotate(30deg) translateY(-50%);
  height: 200%;
  transform-origin: top;
}
  • Rotates the handle for the skewed split effect.
.skewed .top {
  transform: skew(-30deg);
  margin-left: -1000px;
  width: calc(50vw + 1000px);
}
.skewed .top .content-wrap {
  transform: skew(30deg);
  margin-left: 1000px;
}
  • Applies a skewed transformation to the top layer.

Responsive Design

@media (max-width: 768px) {
  body {
    font-size: 75%;
  }
}
  • Reduces font size on small screens.

Step 3 : Javascript For Smooth Image Slider:

Javascript Code

JavaScript

// create by aspirepages.in copyright 2025 
document.addEventListener('DOMContentLoaded', function(){
    let wrapper = document.getElementById('wrapper');
    let topLayer = wrapper.querySelector('.top');
    let handle = wrapper.querySelector('.handle');
    let skew = 0;
    let delta = 0;
  
    if(wrapper.className.indexOf('skewed') != -1){
      skew = 1000;
    }
  
    wrapper.addEventListener('mousemove', function(e){
      delta = (e.clientX - window.innerWidth / 2) * 0.5;
  
      handle.style.left = e.clientX + delta + 'px';
  
      topLayer.style.width= e.clientX + skew + delta + 'px';
    });
  });

Javascript explanation:

document.addEventListener('DOMContentLoaded', function() {
  • Ensures the script runs only after the page has fully loaded.
   let wrapper = document.getElementById('wrapper');
    let topLayer = wrapper.querySelector('.top');
    let handle = wrapper.querySelector('.handle');
    let skew = 0;
    let delta = 0;
  • wrapper → Main section container.
  • topLayer → Right side (.top).
  • handle → Movable slider.
  • skew → Adjusts skewed layout.
  • delta → Stores mouse movement difference.
    if(wrapper.className.indexOf('skewed') != -1) {
      skew = 1000;
    }
  • If .skewed exists, skew is enabled.
    wrapper.addEventListener('mousemove', function(e) {
      delta = (e.clientX - window.innerWidth / 2) * 0.5;
  
      handle.style.left = e.clientX + delta + 'px';
  
      topLayer.style.width= e.clientX + skew + delta + 'px';
    });
  • Listens to mouse movement.
  • Moves the handle and adjusts the top layer width dynamically.

Live Preview the hosted website:

Smooth Image Slider
live preview

Download complete code :

Git Hub link :

Git Hub link

Read our previous blog post :

Animated CSS gallery with smooth view transitions for interactive, responsive design.
Transform Your Website with Stunning CSS Gallery Animations! 🌟

Leave a Comment

You have been successfully Subscribed! Ops! Something went wrong, please try again.
Twitter Facebook X-twitter

Important Pages

About us

Contact us

Disclaimer

Privacy policy

Terms and conditions

Recent blogs

  • All Post
  • Automobile
  • BOOKS
  • Business
  • Codeing
  • Community
  • Computer & Electronics
  • Education
  • Entertainment
  • Jobs & Education
  • Lifestyle
  • Technology
  • Travel

© 2023 Aspirepages   •  Terms and Conditions • Privacy policy  •  Disclaimer