javascript - 如何在移动设备上通过触摸左右滑动？

Question

https://codepen.io/douglascat90/pen/KeEaxd

我想添加 javascript/css/任何需要的东西，这样我就可以在移动设备上通过触摸向左或向右滑动，它会相应地向左或向右更改幻灯片。最好的方法是什么？我在这里跟随 Damian Drygiel 制作的代码笔 https://codepen.io/drygiel/pen/rtpnE

<div id="slider1" class="csslider infinity inside">
<input type="radio" name="slides" id="slides_1" checked />
<input type="radio" name="slides" id="slides_2" />
<input type="radio" name="slides" id="slides_3" />
<input type="radio" name="slides" id="slides_4" />
<input type="radio" name="slides" id="slides_5" />
<input type="radio" name="slides" id="slides_6" />
<ul>
    <li>
        <p id="solutionsTitle">Title</p>
         Temporibus autem quibusdam et aut Temporibus autem quibusdam et 
aut Temporibus autem quibu beatae vitae dicta sunt explicabo. Nemo enim 
ipsam voluptatem quia voluptas sit aspernatur sdam et aut Temporibus 
autem quibusdam et aut Temporibus autem quibusdam et aut Temporibus 
autem quibusdam et aut.
    </li>
    <li>
        <p id="solutionsTitle">Title1</p>
           Sed ut perspiciatis unde omnis iste natus error sit 
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque         
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit     
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos 
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui 
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia 
non numquam
    </li>
    <li>
        <p id="solutionsTitle">Title2</p>
            Sed ut perspiciatis unde omnis iste natus error sit 
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque 
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit 
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos 
qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui 
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia 
non numquam ratione voluptatem sequi nesciunt. Neque porro quisquam est, 
qui dolorem ipsum quia dolor sit amet, 
    </li>
    <li>
        <p id="solutionsTitle">Title 3</p>
Ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem 
ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque 
porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione 
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum 
quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro 
quisquam est, qui dolorem ipsum quia dolor sit amet, 
    </li>
    <li>
        <p id="solutionsTitle">Title 4</p>
            At vero eos et accusamus et iusto odio dignissimos ducimus 
qui blanditiis praesentium voluptatum deleniti atque corrupti quos 
dolores et quas molestias excepturi sint occaecati cupiditate non 
provident, similique sunt in culpa qui officia deserunt mollitia animi, 
id est laborum et dolorum fuga. Et harum quidem rerum facilis est et 
expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi 
optio cumque nihil impedit quo minus id quod maxime placeat facere 
possimus, omnis voluptas assumenda est, omnis dolor repellendus. 
Temporibus autem quibusdam et aut
    </li>
    <li>
         <p id="solutionsTitle">Title 5</p>
            At vero eos et accusamus et iusto odio dignissimos ducimus 
qui blanditiis praesentium voluptatum deleniti atque corrupti quos 
dolores et quas molestias excepturi sint occaecati cupiditate non 
provident, similique sunt in culpa qui officia deserunt mollitia animi, 
id est laborum et dolorum fuga. Et harum quidem rerum facilis est et 
expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi 
optio cumque nihil impedit quo minus id quod maxime placeat facere 
possimus, omnis voluptas assumenda est, omnis dolor repellendus. 
Temporibus autem quibusdam et aut  Temporibus autem quibusdam et aut  
Temporibus autem quibusdam et aut
    </li>

</ul>
<div class="arrows">
    <label for="slides_1"></label>
    <label for="slides_2"></label>
    <label for="slides_3"></label>
    <label for="slides_4"></label>
    <label for="slides_5"></label>
    <label for="slides_6"></label>
</div>
<div class="navigation">
    <div>
        <label for="slides_1"></label>
        <label for="slides_2"></label>
        <label for="slides_3"></label>
        <label for="slides_4"></label>
        <label for="slides_5"></label>
        <label for="slides_6"></label>
    </div>
</div>

Answer 1

您将需要使用 JavaScript，适本地添加 touch 事件监听器:

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

1. 添加 touchmove事件监听器，用于检测用户手指/脚趾/ Nose 相对于屏幕的位置。获得整数后，使用 style endpoint ，并更新 margin-left 以等于您的距离(以像素为单位)。

2. 添加第二个事件监听器，touchend .有了这个，检测用户是否超过 slider 的某个边缘(例如，用户将内容推了 30%，更新要检查的适当的 input(当前 -/+ 1)。

根据您提供的笔快速开始:

const slider = document.getElementById('slider1');
const slides = slider.querySelectorAll('input');

slider.addEventListener('touchmove', (e) => {
  // Add step 1 in here
});

slider.addEventListener('touchend', (e) => {
  // Add step 2 in here
});