Help with swiper.js

Design help Custom code
1

Hi,

I have a database of images in CMS, and a template CMS item page that has a thumbnail swiper at the bottom using swiper.js. I would like to have the thumbnail of the image that is displayed on the particular template page be in the center of the slider, each time it loads a new image - I can’t figure out for the life of me how to implement that - can anyone please help me?

Thanks

Here is my public share link: LINK

2

Can you share some screenshots and the live link of the page(s) with the issue?

3

Thanks @sam-g

here is a screenshot

53%20PM
53%20PM2553×1300 622 KB

and here is the live site
https://ivgphoto-fin.webflow.io/portfolio/flamenco

I want to have the thumbnail of the larger image be centered in the thumbnail slider…

1 Like
4

Any thoughts? I am still struggling

5

Hey @IVG, I’m not familiar with this library, but it looks like there is an option for this.

See the following codepen (not mine): https://codepen.io/hagiang1305/pen/apxvEZ

6

@IVG any luck getting this to work?

7

sorry - no such luck… I haven’t figured out how to make it work yet… especially because I have a large cms collection that has more than 100 images…

8

So it looks like they set up two swiper objects and if you look at this piece of code, you can see where they have the centeredSlides property set to true, and the slideToClickedSlide also set to true. I’m guessing one of those options is doing it.

var galleryThumbs = new Swiper('.gallery-thumbs', {
  spaceBetween: 10,
  centeredSlides: true,
  slidesPerView: 'auto',
  touchRatio: 0.2,
  slideToClickedSlide: true,
		loop: true,
		loopedSlides: 4
});
9

100 images is to much (slow site loading) Use lazy loading -or- limit items.

2 Likes
10

@Siton_Systems you are correct 100 images is too much, and as such I don’t understand how to do it - especially given the fact that I have more than 100 images… I have been trying to figure out how to deal with this issue for a while now and thus far no solution…

I have been thinking to also add mixin.js - which lets you get around the 100 image problem by combining sevearal collections each with 100 images into 1, but most likely this will make it even slower…

really confusing… - one thing that was easy in wix… here is very very difficult…

11

No one going to swipe 100 images. Maybe change the design/layout

2 Likes
12

What @Siton_Systems said is very true, you are doing an unnecessary work by creating inefficient layout.

13

@Siton_Systems @dram

The reason I am using swiper is because of inefficiencies of the builtin webflow lightbox widget… so instead of having a lightbox when a user clicks on an image in the gallery, they are taken to the CMS page where they can see an image in full screen and get additional information… and I wanted to have a thumbnail slider that people can look around with… I thought it is a reasonably efficient layout… I didn’t think it to be to cumbersome… but I am open to suggestions…

14

I think having thumbnails under main image is good idea, but not when they are in one line and need to be scrolled. Just create a grid of thumbnails below the main image so that they are all available at a glance.

15

i was toying with this idea before, but i thought it to be even more cumbersome primarly because if I want to have a “contact sheet” with the thumbnails of the entire gallery, I would need to use js anyway so that I can work around the 100 image limitation… so swiper seemed like a more elegant solution… again an issue with a webflow limitation…

also, wouldn’t it be even harder on the processing having to render several hundred thumbnails on one page at the same time rather than having only 20 or so?

16

Dammit, I’m itching to tell about the solution to overcome exactly this problem that we have brewing inside our company, but not yet :wink:

Though yeah, I get your point here.

17

additionally, i just tried again to play around with the contact sheet, the problem is if I have the swiper - there is a setting that I found that will allow the displayed image be centered in the swiper as well… - which is important for the collections with a lot of images.

But if I have a “contact sheet” approach, I don’t understand how to have the relevant part of the collection displayed in it - again because of the 100 item limitation…

And you peaked my interest with your “solution”… I can beta test it for you when you are ready to do that and I am willing to sign an NDA (if necessary) :slight_smile:

18

Have a look - this is a contact sheet that I can do… but it is a lot slower than the slider… perhaps there is a way to optimize it…

19

Try this lazy loading technique maybe?