Как создать сенсорный слайдер с содержанием страниц

Question

Я пытался кодировать это сам или извлекать библиотеки, такие как Tiny Swiper 2, но безрезультатно.

Чего я хочу достичь?

Я кодирую PWA (Progressive Web App) ). Хорошо, когда пользователь имеет тот же опыт, что и нативное приложение. Поэтому я хотел создать что-то вроде :

I wanted to create this for a webpage. For mobile devices touch to scroll should even be supported.

The Problems?

When I gave up third party plugins I tried on my own again.

Here's an example of what I tried so far in jsFiddle

Нерешенные проблемы:

1. В Safari для мобильных устройств это У решения очень слабая навигация.

Решенные проблемы:

• Это хорошо, потому что пользователь может прокручивать с помощью касания, но он может прокручивать до середины двух страниц. , Он только должен иметь возможность пролистывать страницы 1 и 2 и не должен останавливаться между страницами.
  Решение : Scroll Snapping

• Вся прокрутка веб-страницы вниз, чтобы навигационные кнопки выравнивались вверх, когда мы перемещаемся с помощью навигационных кнопок.
  Решение : The main webpage content should have the exactly hight of the screen height. The content of the slider_pages netherless can be larger than the screen width.

• Нет анимации прокрутки, когда с помощью кнопок навигации.
  Решение : Add scroll-behavior: smooth; to slider_container