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

Hide next/prev controls in a slideshow on desktop only

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

Share this post


Link to post

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

Share this post


Link to post
  • 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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 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.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


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