Carousel - Thumbnail scrolling

Hello first post.

GoLive > Muse > Blocs guy.

I have a website page and would like to create the same in Blocs. At this point I can’t seem to get this to work. There are two ‘carousel’ bricks in the library, but neither seem to be able to do this.

http://beyondtheseastudio.com/theunusual.html

Thanks in advance
Ron O. Vermeulen

To get that look you might want modify or I should say customize classes for the ‘thumbnail gallery’ bloc but I wouldn’t and heres why. While the desktop is customized and looks great but you need create other interaction for other responsive sizes such as tablet and mobile. Also, you might want to rethink the current interaction and see it in a new light. Remember, Blocs is using a new and a modern approach to showcase ones gallery something thats more familiar and universal to and for everyone who uses the browser wether mobile, tablet, or desktop. Looking at the site id say theres room for improvement.

Hello Petester,

Not really the answer I’m looking for. I have found for my clients, that having just a ‘carousel’ with eg: 30+ images, is very confusing, if someone wants to go back to a specific image in the catalog. The old website link above (Muse), you can see the thumbnail and “instantly” > carousel to it! Also click quickly between two or more items you are interested in. If this can not be done right now, I’m hoping that this could be looked into in the near future. Yes, of course I would re-arrange the view, so that in ‘smart phone layout’, the thumbnail group would be below the main carousel. I will try and find out where to list this as a > Bric Request! ASAP.

Hey @RonObvious I have a popular slider for RapidWeaver that maybe could fit your needs (and others I hope) if translated to Blocs, take a look: https://www.weaverskingdom.com/stacks/slider-classic/index.html

The problem with a thumbnail option, particularly where many images are involved, is that it is difficult to create the thumbnail gallery at a size that can be used effectively on mobile screens. Essentially, a block of usable and easily isolated thumbs under a main image often means users having to scroll up and down between the thumbnail grid and the larger image. If the images are too small to be hit positively with fat fingers, the whole thing becomes a bit of a pointless exercise. In the example provided, the site isn’t responsive so the issue doesn’t arise, but if you’re making a site for cross device use, it may be better to rethink the available options.

We were faced with a similar request from a client recently and we finally settled on a workable compromise that works at all screen sizes. Essentially, we created a horizontal scrolling thumbnail strip that responds to all screen sizes whilst still making the thumbnails easily selectable. The larger images were then displayed in a lightbox where they could be scrolled at full size, or the box could be closed, allowing the user to go back to the thumbnail strip for quick selection of another image. The good thing about this solution is that the images don’t become so small on mobile screens as to be difficult to see or select.

I posted the gallery here some time ago, but if you missed it and would like to give it a go, you can download it from HERE. You can download the standard 20 image gallery, or, if you have Temult Hype, you can also download the Hype project file to customise it to accommodate as many images as you wish.