Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Slideshow - Swipe or flick through/Horizontal scrolling


VLabrie

Question

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!

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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 thr

2 answers to this question

Recommended Posts

  • 0

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

Edited by brandon

If a response helped you out, send a 'Like' ūüĎć (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post
  • 0

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;}
  
}

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


√ó
√ó
  • Create New...