Как сделать этот слайд влево и вправо одним касанием на мобильном телефоне?

Question

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

Я хочу добавить javascript / css / все, что нужно, чтобы я мог скользить влево или вправо на мобильном телефоне с помощью касания, и это изменит слайд влево или вправо соответственно. Какой лучший способ сделать это? Я следую вместе с кодовым блоком, созданным Дамианом Драйджилом здесь 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 слушатель событий, чтобы определить, где по отношению к экрану находится палец пользователя / нос / нос. Получив круглое число, используйте конечную точку стиля и обновите margin-left, чтобы выровнять расстояние в пикселях.

2. Добавить второго прослушивателя событий, touchend . При этом определите, превышает ли пользователь определенное поле ползунка (например, пользователь выдвинул содержимое на 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
});

Answer 2

Я где-то нашел функцию, вы можете изменить ее, чтобы получить правильные результаты. Но я думаю, что вы не можете сделать это без JavaScript.

carousel.on('touchstart touchmove touchend', function (e) {
                            touchHandler(e);
});
function touchHandler (event) {
                    var touch
                        , xSwipe
                        , ySwipe;

                    if (typeof event !== 'undefined'){  
                        // for vanilla javascript use event.touches
                        if (typeof event.originalEvent.touches !== 'undefined') {
                            touch = event.originalEvent.touches[0];

                            switch (event.originalEvent.type) {
                                case 'touchstart':
                                case 'mousedown':
                                    _touches[event.originalEvent.type].x = touch.pageX;
                                    _touches[event.originalEvent.type].y = touch.pageY;
                                    break;
                                case 'touchmove':
                                case 'mousemove':
                                    _touches[event.originalEvent.type].x = touch.pageX;
                                    _touches[event.originalEvent.type].y = touch.pageY;
                                    break;
                                case 'touchend':
                                case 'mouseup':
                                    if (!carousel.data('busyAnimating')) {
                                        _touches[event.originalEvent.type] = true;

                                        if (_touches.touchstart.x > -1 && _touches.touchmove.x > -1) {
                                            xSwipe = Math.abs(_touches.touchstart.x - _touches.touchmove.x);
                                            ySwipe = Math.abs(_touches.touchstart.y - _touches.touchmove.y);

                                            if (xSwipe > ySwipe && xSwipe > (getViewport().width * .33)) {
                                                _touches.direction = _touches.touchstart.x < _touches.touchmove.x ? 'left' : 'right';

                                                if (_touches.direction === 'left') {
                                                    moveToSlide('prev');
                                                } else if (_touches.direction === 'right') {
                                                    moveToSlide('next')
                                                }
                                            }
                                        }
                                    }
                                    break;
                            }
                        }
                    }
                }