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

Simple. Horizontal. Scroll


Recommended Posts

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.

 

Link to post
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

@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  

  • 2 weeks later...

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 3 weeks later...

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

Edited by khomatech
Link to post
  • 2 months later...
  • 2 months later...
  • 1 month later...
  • 1 month later...

@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

 

Edited by SabineM
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...