Horizontal slider for mobile which works with CMS

Hello my name is Mark and I have to find a solution for a mobile horizontal slider. I checked the pother posts and saw that Swiper is a way to do it, but as I understand it its more to use for imgaes.

Since the last two month I create an online course plattform with webflow and now I have to find a solution t oshow the so called online course cards in a way Udemy or skillshare are doing it. So the user will see 1 1/2 cards. The classic thing people are expecting today and know intuitiv what to do…swipe to left.

The online course card you can see here: https://www.viivaa.de/onlinekurse

Its a CMS collection witch consits of a header imagage, the name of the course, the person who offers the coruse and an intro text. The course card refers via link block to the course detail page on my website.

Does anyone know a solution how to realize this. Is the a posibility with swiper. Or is there any custom css code available. I guess (or hope) that I am not the first guy who needs a solution like this and maybe there is a something already excisting…that would be great.

If any one can help I woudl really appreciate.

Best regards
Mark


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Mark_viivaa I have created a simple example of multi-image slider with images from CMS.

READ ONLY
LIVE EXAMPLE

Just one note, Udemy isn’t best example as is NOT fully responsive because they have horizontal scroll on mobile view (at least in monitor simulation tested in Safari and chrome) and this is a big red flag;)

Hope you will find this example helpful.

Hi Stan, thank you very much for your quick feedback…great! This looks pretty good, I’ll take a close look at it after the weekend and try to integrate it into my site…and give you final info if and how it worked out.

Best thanks for the moment and have a good weekend, many greetings

Mark

Hello Stan! This looks really good at first sight and the first thing I thought was “Yeeeaah…I found my solution” :wink: But I think it is still not quite the solution that covers what is needed.

But maybe it’s easier than I think and I’m already close to it. As you can see…I am a beginner :slight_smile:

If you look at https://www.viivaa.de/onlinekurse at the “slider” with the 4 online course cards, then it is important to know that these courses come from the CMS and are provided with attributes (eg: a specific category or as here “Promoted on home page”) and are thus output here.

That means also that each of the online courses in the individual slider must be a different and that no courses are displayed twice. With the variant, which I have seen with you, this does not work at the moment. Do you have an idea how to solve this things I need to make it running?

I hope I was able to give you a good idea of what I still have to solve and I am very curious about your feedback.

Many greetings
Mark

P.S.: Thanks again for sharing your demo and the read-link!

Hi @Mark_viivaa my example was only about how to structure slider different way and mostly was about its construction. Only difference is that you have four cards in one slide and in provided example is each card one slide. I did not provide exact solution you need as I do not know all your needs and it is up to you what approach you will take. :wink:

In provided example all data to these individual slides can come from CMS, so there is no problem to set each slide differently (color, image, preview text, category etc.) as these informations and logic can/should be constructed within CMS.

I will gladly help you in feature , if you will need some assistance you can PM me and we can talk abou that.

Hi @Stan

thanks for the quick feedback, that’s great!

I will outline you exact requirements tomorrow and send you via private message.

Have a nice evening,
regards/Mark