Блог

Главная - Вопросы по программированию - Перетаскиваемый слайдер flexbox с использованием javascript работает, но дрожит

Перетаскиваемый слайдер flexbox с использованием javascript работает, но дрожит

#javascript #html #css #flexbox

#javascript #HTML #css #flexbox

Вопрос:

У меня есть слайдер flexbox, над которым я работаю, но js не работает гладко. Функция перетаскивания работает близко к тому, как я этого хочу, но содержимое прыгает / дрожит при перетаскивании. Не уверен, связана ли проблема с js или из-за конфликта с CSS. Или, может быть, мне следует использовать разные прослушиватели событий?

Самый последний фрагмент js — это функция перетаскивания. Спасибо

 let container = document.querySelector('.container');
let sliderWrapper = document.querySelector('.slider-wrapper');

let pressed = false;
let startx;
let x;

container.addEventListener('mousedown', (e)=>{
  pressed = true;
  startx = e.offsetX - sliderWrapper.offsetLeft;
  container.style.cursor = 'grabbing'
});

container.addEventListener('mouseenter', ()=>{
  container.style.cursor = 'grab'
});

container.addEventListener('mouseup', ()=>{
  container.style.cursor = 'grab'
});

window.addEventListener('mouseup',()=>{
  pressed = false;
});

container.addEventListener('mousemove', (e)=>{
  if(!pressed) return;
  e.preventDefault();

  x = e.offsetX

  sliderWrapper.style.left = `${x - startx}px`;
});  
 * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
}

.gallery {
  position: relative;
  height: calc(100vh - 200px);
  width: 90vw;
  left: 05vw;
  top: 100px;
  overflow-x: hidden;
}

.container {
  height: inherit;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.slider-wrapper{
  display: flex;
  position: absolute;
  height: inherit;
}

.swiper-slide {
  height: 100%;
  pointer-events: none;
}

.element{
  height: 100%;
}  
 <body>
  <div class="gallery">
    <div class="container">
      <div class="slider-wrapper">
        <div class="swiper-slide">
          <img class="element" src="https://via.placeholder.com/150/f19.png/mmm">
        </div>
        <div class="swiper-slide">
          <img class="element" src="https://via.placeholder.com/300/f71.png/mmm">
        </div>
        <div class="swiper-slide">
          <img class="element" src="https://via.placeholder.com/300/09f.png/mmm">
        </div>
      </div>
    </div>
  </div>
  <script src="slider.js"></script>
</body>
</html>

Ответ №1:

Я не говорю, что мне нравится ваш код или он волшебным образом будет работать, как ваша мечта, но изменение x = e.offsetX на x = e.clientX сработало для меня.

Комментарии:

1. спасибо, это исправило. У вас есть какие-либо идеи, почему моя функция не будет работать со смещением?

2. e.offsetX выдавал целочисленные значения вместо двойных, что, на мой взгляд, не должно этого делать, но это экспериментальная технология …. так что я бы все равно ее не использовал.