Как реализовать swipe logi c для моего компонента? - PullRequest
Новая
       40

Как реализовать swipe logi c для моего компонента?

0 голосов
/ 19 марта 2020

Я сделал карусель с React-slideshow-image, но проблема в том, что на мобильной версии невозможно провести пальцем. Поэтому я хотел бы иметь возможность настроить свайп самостоятельно, но я не знаю, как это сделать.

Не могли бы вы мне помочь?

Вот код моего компонента (следующий js) 

const Diaporama = () => {
  return (
  <div className="slider">

    <Fade duration={5000}
          transitionDuration={500}
          infinite={true}
          indicators={true}
          scale={1}
          arrows={false}>
      {
        images.map((each, index) => <img key={index} alt={each} style={{width: '100%'}} src={each}/>)
      }
    </Fade>
  </div>

1 Ответ

0 голосов
/ 24 марта 2020

Вы всегда можете попробовать что-то вроде этого ... 

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;
});
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;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 1; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
});
//VARIABLES BECAUSE CSS PREPROCESSORS ARE COOL
$gray: #555;
$yellow: #f2e968;
$white: #efefef;

//GET THE GOOGLE FONT SPECIMEN
@import url(https://fonts.googleapis.com/css?family=Rubik);

body,
html {
  color: #fff;
  text-align: center;
  background: $white;
  font-family: Helvetica, sans-serif;
  margin: 0;
}

.items {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;  
  position: relative;
  width: 100%;
  overflow-y: hidden;
  white-space: nowrap;
  transition: all 0.2s;
  transform: scale(0.98);
  will-change: transform;
  user-select: none;
  cursor: pointer;
  scroll-behavior: smooth;
}

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

.item {
  flex-shrink: 0;
  height: 100px;
  min-width: 600px;
  scroll-snap-align: start;
}
  <div className="slider">
    <div class="items">
      <img class="item item-1" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" />
      <img class="item item-2" src="https://homepages.cae.wisc.edu/~ece533/images/peppers.png" />   
    </div>
  </div>
...