Hey, so one of my clients asked me to build her a gallery slider to cycle through images on her landing page, but I can’t seem to figure out how to make something like it and I was wondering if anyone had some recommendations. This is what she sent me as an example: LINK
I did run across This which has some custom code to make something like it, but I worry that it would not be something she could easily manage without needing me to pop in every time she wanted to add or change images.
If anyone has any recommendations on how I should approach building something like this I would appreciate it! it doesn’t need to be exact, but it needs to be able to display multiple images that can be cycled through.
Hi, so i have used swiper.js previously and it is super simple to set up. You can set it up with images that you uploaded to the asset panel or with CMS… your choice, and it is very quick to set up…
If you do it via CMS - all your client will have to do is to add the images to CMS and they will populate on the site. But, beware, the CMS galleries have a 100 items per collection limitation, so if you are anticipating that there will be more than that then there will be some additional steps necessary so that you can create several collections on the page and then either they will display separately or you can add more custom code to merge two separate collections… but all in all it is very doable and your client will not need to deal with coding at all…
Thanks for weighing in with the advice. Unfortunately though I’m not incredibly knowledgeable when it comes to integrating custom code and I haven’t been able to parse out how this is done from what I have read so far. Is there a resource you can point me to that would help me understand how the integration would work? it doesn’t seem to be as simple as just copying the code into an embed.
I think the CMS option would be best and I believe 100 images is more than enough for her needs.
go to codepen and search for pens with swiper.js - there are tons of examples…
also read the documentation for swiper.js it is detailed and very helpful with lots of examples…
just remember the styles go to the Inside <head> tag and scripts go into the Before </body> tag and you can only see the results once you publish…
also post a READ ONLY link to your site and give a more specific example of what you want to achieve…
Here’s my READ ONLY link and an image of what I’m trying to put together roughly in terms of its location. The actual interaction can very but I was aiming to do exactly what I had linked as the example she sent me as I said in my initial post.
