A Full-screen Touch Slider That Works With Mouse Drag

The simple full-screen touch slider is TouchSlider that works with mouse drag, Vanilla JS, and CSS.

touch slider html css, infinite slider, responsive touch slider using html css & swiper js, slider javascript, drag slider javascript, mouse drag slider javascript

How to make use of it:

1. Add pictures as slides to the slider.

<div class="slider-container">
  <div class="slide">
  <div class="slide">
  <div class="slide">
  <div class="slide">
  <div class="slide">

2. The mandatory CSS types for the slider.

.slider-container {
  height: 100vh;
  display: inline-flex;
  scrollbar-width: none;
  overflow: hidden;
  scrollbar-width: none;
  transform: translateX(0);
  will-change: transform;
  transition: transform 0.3s ease-out;
  cursor: grab;

  max-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;

@media(min-width: 1200px){
  .slide {
    padding: 3rem;

.slide img{
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.3s ease-in-out;
  box-shadow: 5px 5px 50px -1px rgba(0, 0, 0.8);
  border-radius: 4px;

.grabbing {
  cursor: grabbing;

.grabbing .slide img{
  transform: scale(0.9);
  box-shadow: 5px 5px 40px -1px rgba(0, 0, 0.8);

3. Include the principle script app.js on the web page.

<script src="app.js"></script>

4. Or insert the next JS snippets into your JS.

const slider = document.querySelector('.slider-container'),
      slides = Array.from(document.querySelectorAll('.slide'))
let isDragging = false,
  startPos = 0,
  currentTranslate = 0,
  prevTranslate = 0,
  currentIndex = 0
slides.forEach((slide, index) => {
  const slideImage = slide.querySelector('img')
  // disable default image drag
  slideImage.addEventListener('dragstart', (e) => e.preventDefault())
  // touch events
  slide.addEventListener('touchstart', touchStart(index))
  slide.addEventListener('touchend', touchEnd)
  slide.addEventListener('touchmove', touchMove)
  // mouse events
  slide.addEventListener('mousedown', touchStart(index))
  slide.addEventListener('mouseup', touchEnd)
  slide.addEventListener('mousemove', touchMove)
  slide.addEventListener('mouseleave', touchEnd)
// make responsive to viewport changes
window.addEventListener('resize', setPositionByIndex)
// prevent menu popup on long press
window.oncontextmenu = function (event) {
  return false
function getPositionX(event) {
  return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX
function touchStart(index) {
  return function (event) {
    currentIndex = index
    startPos = getPositionX(event)
    isDragging = true
    animationID = requestAnimationFrame(animation)
function touchMove(event) {
  if (isDragging) {
    const currentPosition = getPositionX(event)
    currentTranslate = prevTranslate + currentPosition - startPos
function touchEnd() {
  isDragging = false
  const movedBy = currentTranslate - prevTranslate
  // if moved enough negative then snap to next slide if there is one
  if (movedBy < -100 && currentIndex < slides.length - 1) currentIndex += 1
  // if moved enough positive then snap to previous slide if there is one
  if (movedBy > 100 && currentIndex > 0) currentIndex -= 1
function animation() {
  if (isDragging) requestAnimationFrame(animation)
function setPositionByIndex() {
  currentTranslate = currentIndex * -window.innerWidth
  prevTranslate = currentTranslate
function setSliderPosition() {
  slider.style.transform = `translateX(${currentTranslate}px)`

Fullscreen Touch Slider, full screen touch slider Plugin/Github, slider with mouse interaction, draggable slider jquery

See Demo And Download

Official Website(bushblade): Click Here

This superior jQuery/javascript plugin is developed by bushblade. For extra Advanced Usages, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…