Jump to content

Hide next/prev controls in a slideshow on desktop only

Recommended Posts

Site URL: https://greg-holland-2020.squarespace.com/for-him

I want to display image blocks, each with a single rollover image, then I need to display 'prev/next' on mobile and change that to a rollover effect on desktop. I have a work around but it's not 100% there yet and I need help! I will explain below;

1) There are 15 separate images, each with a single rollover image.
2) I need the 'prev/next' controls to appear on mobile only
3) I need a hover state on desktop only
4) This needs to be targeted to one page only, so not site wide.
5) I set the images up as gallery blocks using 'stacked'.
6) I added CSS to create the roll over image


PROBLEM
If I want to display 'next/prev' I presume I need to use 'slideshow' instead of stacked.
I had help adding custom code to remove 'next/prev' (for desktop only) which works, but I need to use 'stacked' for the rollover code to work.
Is there a way to adjust the custom code so it allows the hover to work with 'slideshow' instead of 'stacked'

I hope that all makes sense!!!!

It's the first section of mens rings only below the main banner.
https://greg-holland-2020.squarespace.com/for-him
pa33word

Cheers
Claire

Link to comment

Hi Tuaphan.

I'm still stuck in the same place. The blocks need to be set up as stacked so the rollover CSS works. I need to adjust the CSS to work with slideshow so the next/prev arrows show up (on mobile only).

As an exampe, the first block is set to slideshow so you can see the rollover is missing, plus the arrows only show on mobile. This is the CSS for the stacked rollover image. Any help you could offer would be amazing.

// ROLLOVER IMAGE EFFECT //
.sqs-gallery-block-stacked .sqs-gallery {
position: relative;
}
.sqs-gallery-block-stacked .sqs-gallery .image-wrapper:hover ~ .image-wrapper {
opacity: 1;
}
.sqs-gallery-block-stacked .sqs-gallery .image-wrapper ~ .image-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in;
}

Link to comment
On 3/16/2020 at 2:39 AM, Claire_auck said:

Hi Tuaphan.

I'm still stuck in the same place. The blocks need to be set up as stacked so the rollover CSS works. I need to adjust the CSS to work with slideshow so the next/prev arrows show up (on mobile only).

As an exampe, the first block is set to slideshow so you can see the rollover is missing, plus the arrows only show on mobile. This is the CSS for the stacked rollover image. Any help you could offer would be amazing.

// ROLLOVER IMAGE EFFECT //
.sqs-gallery-block-stacked .sqs-gallery {
position: relative;
}
.sqs-gallery-block-stacked .sqs-gallery .image-wrapper:hover ~ .image-wrapper {
opacity: 1;
}
.sqs-gallery-block-stacked .sqs-gallery .image-wrapper ~ .image-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in;
}

Have you solved yet?

and where slideshow? you mean The creative process? or?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

We have created 2 blocks for Stacked - Slide products, then hide one for desktop, one for mobile. Because each block has a different ID, the code cannot be applied to every site. If anyone is interested, just leave the url, I will help.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.