Continuous sliding when dragging the elements without jquery

Issue

I’m trying to get a smooth drag effect. When I drag the slider on mobile phone it stops when I remove my finger. I want it to keep sliding till the end of the slider.

What I’m trying to reach is a smooth dragging effect like the one in App Store (when dragging app icons it continue sliding even if you removed your hand depending on how fast you dragged them.)

The one I have here stops when I remove my finger.
Also the slider is kinda laggy and the motion is unnatural

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

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
  console.log("erreerre", scrollLeft)
});

slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});

slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});

slider.addEventListener('mousemove', (e) => {
  if (!isDown) return;  // stop the fn from running
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 2;
  slider.scrollLeft = scrollLeft - walk;
  
  console.log('sdsd', scrollLeft)
  console.log(slider.scrollLeft)
});



slider.addEventListener('touchstart', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});

slider.addEventListener('touchend', () => {
  isDown = false;
  slider.classList.remove('active');
});

slider.addEventListener('touchcancel', () => {
  isDown = false;
  slider.classList.remove('active');
});

slider.addEventListener('touchmove', (e) => {
  if (!isDown) return;  // stop the fn from running
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 2;
  slider.scrollLeft = scrollLeft - walk;
});
.items {
  height:600px;
  padding: 100px;
  width:100%;
  /*border:1px solid white;*/
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: all 0.2s;
  transform: scale(0.98);
  will-change: transform;
  position: relative;
  background: rgba(255,255,255,0.1);
  font-size: 0;
  perspective: 500px;
  transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}

.items.active {
  background: rgba(255,255,255,0.2);
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1);
}

.item {
  width:300px;
  margin:0 80px 0 80px;
  height: calc(100% - 40px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  font-weight: 100;
  color:rgba(0,0,0,0.5);
  box-shadow:  5px 3px 4px 10px black;
}
<div class="items">
  <div class="item item1"><img src="images/cert1.png"></div>
  <div class="item item2"><img src="images/cert2.png"></div>
  <div class="item item3"><img src="images/cert3.png"></div>
  <div class="item item4"><img src="images/cert4.png"></div>
  <div class="item item5"><img src="images/cert5.png"></div>
  <div class="item item6"><img src="images/cert6.png"></div>
  <div class="item item7"><img src="images/cert7.png"></div>
  <div class="item item8"><img src="images/cert8.png"></div>
  <div class="item item9"><img src="images/cert9.png"></div>

</div>

Live preview https://www.alfajer-dc.com/evraz/
The slider is where the certificates are located.

Solution

You should be able to achieve the desired effect without Javascript and rely on browser implementations to manage the scroll.

Below I modified your snippet by adding a wrapping element .items-wrap with width=100%. Then changed the existing .items element to display:flex. You could alternatively keep your existing inline:flex style on individual items but most browsers are good with flex properties for several years now.

.items-wrap {
  height:600px;
  padding:100px;
  width:100%;
}

.items {
  display:flex;
  flex-direction:row;
  user-select: none;
}

.item {
  width:300px;
  margin:0 80px 0 80px;
  box-shadow:  5px 3px 4px 10px black;
}

.item img {
  height:auto;
  width:300px;
}
<div class="items">
  <div class="item item1"><img src="https://www.alfajer-dc.com/evraz/images/cert1.png"></div>
  <div class="item item2"><img src="https://www.alfajer-dc.com/evraz/images/cert2.png"></div>
  <div class="item item3"><img src="https://www.alfajer-dc.com/evraz/images/cert3.png"></div>
  <div class="item item4"><img src="https://www.alfajer-dc.com/evraz/images/cert4.png"></div>
  <div class="item item5"><img src="https://www.alfajer-dc.com/evraz/images/cert5.png"></div>
  <div class="item item6"><img src="https://www.alfajer-dc.com/evraz/images/cert6.png"></div>
  <div class="item item7"><img src="https://www.alfajer-dc.com/evraz/images/cert7.png"></div>
  <div class="item item8"><img src="https://www.alfajer-dc.com/evraz/images/cert8.png"></div>
  <div class="item item9"><img src="https://www.alfajer-dc.com/evraz/images/cert9.png"></div>

</div>

Answered By – S Cherry

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published