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

Hide next/prev controls in a slideshow on desktop only


Claire_auck

Question

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

5 answers to this question

Recommended Posts

  • 0

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
  • 0
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.

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
  • 0

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.

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...