Slideshow - Swipe or flick through/Horizontal scrolling

Hi there,

I'm working on a photographer's website, and on her slideshow galleries, she wants to be able to do a horizontal scroll with touchpad or on a mobile device. Basically, like flipping through the gallery from right to left, instead of clicking on the gallery or on arrows. I'm pulling my hair over this. I've come across Flickity but have no idea how to make it work with Squarespace.

Any insight would be so appreciated!

Thank you so much!

Hi @VLabrie.

I have implemented Flickity on multiple Squarespace websites, and it's a great library. However, it's really more of a developer's gallery tool/module than something you implement on top of a Squarespace gallery. In other words, it's its own gallery module in itself. It could be used without developer mode, but would likely be more cumbersome than would be reasonable to implement.

For slideshow gallery blocks (and other blocks and contexts too), I created Swipeable Galleries for Squarespace. Now, to clarify, it does not alter the transition of images (as in, if your gallery fades, it will still fade...but gestures will trigger the transition) nor does it add touch/track-pad swiping (such as two-finger swipe for horizontal scroll). It focuses on touch devices (tablets, phones, most Windows-based laptops these days, etc.), and adds swipeability to those. So, it doesn't check all your boxes, but it may suffice.

I hope that helps.

-Brandon

It actually wasn't that bad to implement flickity. I needed it for mobile version because squarespace gallery block are not user friendly via mobile. I followed youtube instructions implement the plug-in on squarespace and used the flickity site to customize the cell boxes. I used the following code to hide the squarespace carousel on mobile and hide flickity cells on desktop. It looks much better. You can even grab all your image urls from squarespace to add to each flickity cell block. I wish squarespace had an auto swipe function auto available to their galleries, but they don't yet.

@media screen and (max-width: 768px) {
 (div blocks here)
  {display: none !important;}
  
}

@media screen and (min-width: 768px) {
 (div blocks here)
  {display: none !important;}
  
}

Curious if this is still the best way to implement swiping for mobile galleries. Hard to believe a top website editor like squarespace does not have this feature built into their web designs and it's almost 2022...

Upping this, is there genuinely no built in function to allow mobile/tablet users to swipe through images?!

It would appear not ... really tough to do something as simple as this!

Yeah this sux there is not this fuction