Create a Draggable Image Slider in HTML CSS and JavaScript

This tutorial will guide you through creating a draggable image slider using HTML, CSS, and JavaScript. This is a great way to showcase a series of images or other content in an interactive and engaging manner, making your website more dynamic and user-friendly.

Step 1: Setting up the Header Assets

First, include necessary assets in the header section of your HTML document. This might include CSS frameworks or other libraries.

  <link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">

Step 2: Creating the HTML Structure

Next, create the basic HTML structure for your slider. This involves setting up a container for the images and individual elements for each image.

<main>
	<h1>Slide</h1>
	<div class="wrapper">
    <ul class="items">
      <li class="item">0</li>
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
      <li class="item">6</li>
      <li class="item">7</li>
      <li class="item">8</li>
      <li class="item">9</li>
    </ul>
	</div>
</main>

Step 3: Styling with CSS

Now, let’s style the slider using CSS. This will control the appearance and layout of the slider, including the images and overall design.

body {
  color: #333;
  text-align: center;
  background: #222;
  margin: 0;
}

ul {
  padding: 0;
}

li {
  list-style: none;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0;
}
main h1 {
  margin-bottom: 50px;
}

.wrapper {
  position: relative;
}
.wrapper:before, .wrapper:after {
  position: absolute;
  top: 0;
  z-index: 1;
  content: "";
  display: block;
  width: 20px;
  height: 100%;
}
.wrapper:before {
  left: 0;
  background: linear-gradient(90deg, #222, transparent);
}
.wrapper:after {
  right: 0;
  background: linear-gradient(-90deg, #222, transparent);
}

.items {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
  cursor: pointer;
}
.items.active {
  cursor: grab;
}

.item {
  display: inline-block;
  margin-left: 20px;
  user-select: none;
  background: tomato;
  width: 50%;
  height: 130px;
  color: #222;
  font-size: 33px;
  font-weight: bold;
  line-height: 130px;
}
.item:last-child {
  margin-right: 20px;
}

@media screen and (min-width: 500px) {
  .item {
    width: 33%;
  }
}
@media screen and (min-width: 800px) {
  .item {
    width: 25%;
  }
}
@media screen and (min-width: 1200px) {
  .wrapper {
    margin-left: -20px;
  }

  .item {
    width: 20%;
  }
}

Step 4: Adding JavaScript Functionality

Finally, add the JavaScript code to enable the draggable functionality. This code will handle user interactions and update the slider’s position accordingly.

let isDown = false;
let startX;
let scrollLeft;
const slider = document.querySelector('.items');

const end = () => {
	isDown = false;
  slider.classList.remove('active');
}

const start = (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX || e.touches[0].pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;	
}

const move = (e) => {
	if(!isDown) return;

  e.preventDefault();
  const x = e.pageX || e.touches[0].pageX - slider.offsetLeft;
  const dist = (x - startX);
  slider.scrollLeft = scrollLeft - dist;
}

(() => {
	slider.addEventListener('mousedown', start);
	slider.addEventListener('touchstart', start);

	slider.addEventListener('mousemove', move);
	slider.addEventListener('touchmove', move);

	slider.addEventListener('mouseleave', end);
	slider.addEventListener('mouseup', end);
	slider.addEventListener('touchend', end);
})();

Congratulations! You’ve successfully created a draggable image slider. Remember to replace the placeholder numbers in the HTML with your actual images for a complete and visually appealing slider.