我制作了带有React-slideshow-image的轮播,但问题是无法在移动版本上滑动。因此,我希望能够自己设置滑动,但是我不知道该怎么做。
您能帮我吗?
这是我的组件代码(nextjs)
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>
您可以随时尝试类似的方法...
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>