[Enhancement] Refactor Kirby-Slide (Desktop Ready?)

[bommariusser]

Describe the enhancement and the

Since the Ionic slide is deprecating we should consider changing our kirby slide implementation to the one Ionic is pointing towards to: https://swiperjs.com/

Also.. The implemented slide in kirby is very specific bound upon the one usecase which it is used in, but it should be more generic useable for everyone.

See also https://www.jyskebank.dk/bolig/regn-paa-bolig/beregn-laan-i-frivaerdi

Also. The slide implementation above could be more "desktop ready" with adding both button and pagination, which could be part of this issue.

Slide in general has a wide variety of usecases, see also the screenshots below..

---

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

• Request that the issue is UX refined; do not proceed until this is done.
• Request that the issue is tech refined; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

• Make sure you have read: "Before you get coding".
• Signal to others you are working on the issue by assigning yourself.
• Create a branch from the master branch following our branch naming convention.
• Publish a WIP implementation to Github as a draft PR and ask for feedback.
• Make sure you have implemented tests following the guidelines in: "The good: Test".
• Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

• Do a self-review.
• Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".

[MadsBuchmann]

Swiperjs looks good! But it has a ton of functionality some of which might be superflous.

Therefore i think it is worth considering what our exact requirements for a slider is and then discuss if it is worth dragging in another dependency to fulfill those. If the requirements are simple enough, perhaps we would be better served by building the functionality ourselves to have full control?

I've never tried building a slider from scratch so i do not know if it is a PITA, but i think it is worth discussing before jumping to the conclusion that we must use swiperjs.

[jkaltoft]

Suggestion: Do some research before "throwing in another JS library"

Swiper may or may not be overkill. Can CSS Scroll Snap cover the use cases?

[mark-drastrup]

I have done some research as suggested above to see if we can implement our own slider from scratch. It hard to tell whether we can do it ourselves or not, before the slider is UX refined. If it's a simple use case like our current slider, but with pagination and buttons, then is should be feasible for us to do by ourselves. Then we could take inspiration from and expand upon a simple codepen like this: https://codepen.io/bushblade/pen/ZEpvzbK?editors=0010, which supports both desktop and mobile.
But if the expected use cases for the slider is complex, then I believe it would be easier for us to migrate our slider to use Swiper.js

Once this issue has been UX refined, then we are in a better position to decide which direction we want to go.