如何在移动设备上触摸左右这张幻灯片？

Question

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

I want to add javascript/css/whatever is needed so that I can slide left or right on mobile with touch and it will change the slide left or right accordingly. What's the best way to do this? I am following along with a codepen made by Damian Drygiel here 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

You will need to use JavaScript, adding the touch event listeners, appropriately:

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

1. Add a touchmove event listener to detect where in relation to the screen the users finger/toe/nose is. Once you have a round number, use the style endpoint , and update margin-left to equal your distance in pixels.

2. Add a second event listener, touchend . With this, detect if the user is over a certain margin of the slider (Eg the user has pushed the content by 30%, update the appropriate input to be checked (current -/+ 1).

A quick start based on the pen you've provided:

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

I've found a function somewhere, you might change some to get the right results. But I think you can't do it without 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;
                            }
                        }
                    }
                }