Simple. Horizontal. Scroll

I'm here out of desperation as I've wasted hours messing about with overcomplicated gallery options.

I simply want my images within a gallery page to have a horizontal scroll, not vertical. (Not a carousel slideshow, where one image at a time is visible and responsive features are used).

I haven't been able to find a way of searching SS templates by the availability of a horizontal scroll for image content. Templates like 'Ishimoto' offer no adjustment to image padding.

A good example would be the 'Horizon' themes by Format - basic code, uncomplicated clean look. A perfect example on a functioning website would be: https://www.the7thmember.xyz/

I feel like I'm missing something that should be really easy to find, but Gallery Blocks and Gallery Pages are both lacking a basic 'I want it going sideways' option.

Any help would be greatly appreciated.

Big thanks.

This seems to have been missing from day one. I am also desperately wanting this.

I would also like to know how to do this...... anyone got any help with this?

@RWOLFE Can you provide us with a working link to a Gallery Page/Gallery Block on your site where you want to achieve this?

Also looking for a solution to this

+1

Well, here's a start - problem being it's twice the length of the actual gallery and it doesn't move along with the regular arrow navigation, so if you navigate halfway before you use the scroll bar, that becomes the starting position for the scroll bar and you can't go back before that point.

Any way to fix these issues?

.collection-type-gallery #slideshow {
    overflow-x: scroll !important;
}

Also looking for horizontal scrolling gallery with adjustable padding

e.g. http://www.dianamatar.com/evidence

Did anyone figure this out yet?

Sounds like the Momentum template may be the answer here.

Still trying to figure this out. anyone have any luck?

@ccrews  @AdrienneN @meocoli

Hi everybody,

I am quite new in CSS and have only some basic knowledge and experience 😉  but anyway I tried to find out how this could work...because I wanted it a lot !
By a lot of trial & error & time. - and not sure if the code is really a solution without mistakes -   it works!

Simple gallery: in Brine template and I used an index gallery with: layout slideshow, and the fixed height at 108vh. with 6 slides.

#horizontal-gallery {
 width:600vw;
 margin-top:-5vw;
 margin-bottom:-5vw;
 overflow-x:scroll;
 overflow-y:hidden!important;
 position:absolut;
 }

#horizontal-gallery
.Index-gallery-item-image {
  width:100vw!important;
  max-height:105vh;
  margin-top:-0vw;
  padding-bottom:3.6vw;
}

#horizontal-gallery{
article:nth-of-type(1){
  opacity:1.0;
  left:0vw!important;
  right:0vw;
.Index-gallery-item-content
  {margin-left:-500vw!important;
}}
 article:nth-of-type(2){
   width:100vw!important;
  left:0vw!important;
   opacity:1.0;
} 
 article:nth-of-type(3){
    width:100vw!important;
 left:100vw;
} 
 article:nth-of-type(4){
   width:100vw!important;
  left:200vw;
 } 
article:nth-of-type(5){
  left:-200vw!important;
  .Index-gallery-item-content
  {margin-left:-500vw!important;
  }} 
article:nth-of-type(6){
  left:-100vw!important;
  .Index-gallery-item-content
  {margin-left:-500vw!important;
  }}  
}

.Index-gallery-item-content-body p:nth-of-type(1){font-size:0.5em!important;
  color:#ccaa78;
 margin-top:-4vw!important;

}

A bit more complex is this version - but it's an entire index that works like this and so you are free with the content for each page. The scrolling go up and down while the window is horizontal - I love this !! 🙂Sometimes the browser blocks the scrolling until you make the window a tiny bit larger or smaller - do not know why....

#collection-5f749ce77757eb5a41feb591{

.Content-outer {
-webkit-overflow-scrolling: touch!important;
  overflow-scrolling: touch!important;
  overflow-x:hiddden;
  overflow-y:scroll!important;
   -webkit-overflow-y:scroll!important;
  transform: rotate(270deg)   translateX(-100%);
  transform-origin: top left;
  top:0!important;
  position:absolute;
  width:100vh;
  height:100vw;
  top: 0vw;
  bottom:0vw;
  right: 0vw;
  left: 0vw;
}}
//turns/header/images
#page-five,
#page-four,
#page-three,
#page-two,.IndexFirstSectionHeight{
  transform: rotate(90deg)   translateY(-100vh)!important;
transform-origin: top left!important;
 }
//index first section
#page-two{
width:120vw;
margin-top:4vw;
margin-bottom:40vw;
}
#page-two{
.Index-page-content.sqs-alternate-block-style-container{
margin-bottom:10vw;
margin-left:-5%;
}}
#page-three {.Index-page-content{
  position:absolute;
  margin-top:20vw!important;
  display:flex;
  flex-direction:column;
 align-items: center;
  justify-content:center!important;
  display: flex;
  flex-wrap: wrap; 
}}

#page-five,
#page-four,
#page-three {
width:100vw;
}

#page-four{margin-left:0vw;
   width:100vw;
 margin-top:45vw;  //is left:
  margin-bottom:45vw; //is right:
  #block-yui_3_17_2_1_1601546029396_3755{
    width:40%;
    margin-left:30%; } 
  #block-b1eda712c8f4ae9551f1{
    width:100%;
    padding:0;
  }
}
.Index-nav{
  display:none!important;}

.Index-page-scroll-indicator{
 transform: rotate(-90deg) translateY(0px)!important;  
margin-bottom:4vw;
  margin-left:-15vw!important;
}

To all of you much more experienced guys - if you see some mistakes - please let me know.  

here is the demo site:

https://my-personal-test.squarespace.com/

the pw is:  luck

@SabineM

Not working for me 😕

Why is this such a difficult task? Shouldn't be. Shame on you Squarespace. This is why Wordpress is beating you around the world.

@jagbananas Any hot tips on horizonal scroll in Wordpress? I'm having the same problem over there too!

Same. Why have Squarepace not added a horizonal scroll gallery. One with padding that switches to Vertical on a mobile. Its the best option for most phpotographers. As we can add both landscape and porait images. The slidr would look great on horizonally on desktop (high option) then on mobile we get the vertical scroll.

A good example gallery: https://www.helencathcart.com/work/1475/

Go to Viewbook. See www.mikkelsenphoto.com

Hi Everyone,

Maybe this solves your challenge: https://www.sqsmods.com/horizontal

We are planning to offer a a per section horizontal scroll.

Example:
- you have 7 sections + footer
- section 3-4-5 should be shown horizontally when you scroll to that point, 1-2-6-7 vertically.

Cheers,

Roland

Roland, 

This is great news! Do you know of a solution like this that will work for 7.0 sites?

Nope... and we couldn't get it to work because of how 7.0 is different from 7.1 when it comes to Sections.

@RolandFuseHub I have been looking for this FOREVER. I am so so so so so so so excited to see you've created a plugin for horizontal scroll. THANK YOU!

2 hours ago, thecatalystudio said:

@RolandFuseHub I have been looking for this FOREVER. I am so so so so so so so excited to see you've created a plugin for horizontal scroll. THANK YOU!

You are welcome!

hey @RolandFuseHub Can we use it on multiple pages? Is there a maximum when it comes to sections.

On 6/16/2021 at 4:06 PM, JealousWeekends said:

hey @RolandFuseHub Can we use it on multiple pages? Is there a maximum when it comes to sections.

Hi @JealousWeekends You can paste the code into Code Injection so ALL pages have that horizontal scroll, or...paste it in a specific Page Injection for only one (or more) particular page(s).

No restrictions for the amount of sections!

The only thing to keep in mind: because of the limited height, which is constricted by the viewport of the browser and device used, you can't have too much content in a section. We have created the code in such a way that if we detect that you are on a device/or have set your browser to be narrow, we detect that and automatically switch it to a regular vertical view.

More on https://www.sqsmods.com/horizontal and the demo here: https://devhor.squarespace.com/?password=sneakpeek

This video shows it:
We only injected the HOR SCROLL on the Homepage and the others pages have a regular vertical scroll. You can also see what happens when we squeeze the window.

On 5/23/2021 at 11:39 AM, RolandFuseHub said:

Hi Everyone,

Maybe this solves your challenge: https://www.sqsmods.com/horizontal

We are planning to offer a a per section horizontal scroll.

Example:
- you have 7 sections + footer
- section 3-4-5 should be shown horizontally when you scroll to that point, 1-2-6-7 vertically.

Cheers,

Roland

Hey Roland,

Trying this now and it works great so far.

Is there any way to finish the horizontal scrolling on the final section instead of the footer? I tried hiding the footer to solve this myself but am dealt with empty white space after scrolling past my final section.

Website: www.zacela.com/about-1

PW: zacela