Edit debut theme slideshow button to get a slick carousel button

Solved
Highlighted
Anonymous
Not applicable
750 0 56

Hi, currently my slideshow button is dark, instead I'd like it to be transparent with dots for maneuvering as opposed to arrows. I'm using the dark debut theme. Are there any code edits I could make?

CurrentCurrentDesiredDesired

1 Like
Highlighted

Success.

Shopify Expert
539 24 102

The following tutorial assumes your're using Debut 11.2.0 or that the relevant code in the version of your theme you're using is the same or at least similar.

 

Please be sure to make a backup of your theme before you make any changes to the code!

 

Open up the theme code editor (Online Store -> Themes -> Actions -> Edit code) and open the file Assets/theme.scss.liquid. On or around line no. 5239 there will be this code:

.slideshow__arrows {
  background-color: rgba($color-slideshow-controls-background, 0.4);

And a couple of lines below that, this:

  .slideshow__controls:hover &,
  .slideshow__controls:focus &,
  .slideshow__controls--hover & {
    @include media-query($medium-up) {
      background-color: rgba($color-slideshow-controls-background, 0.75);
    }

Change the values 0.4 and 0.75 to 0. That will make the background of the slideshow controls transparent.

 

★ ThemeUp: Nifty Upgrades for your Shopify Store ★ https://themeup.net
2 Likes
New Member
1 0 0

Hi ThomasBorowski, thanks for helping the community. I changed the code according to your advice but it seems to affect only desktop version. Would you mind explaining how to change it also on mobile version please? 

0 Likes
Highlighted
Shopify Expert
539 24 102

The slideshow arrow container is already set to have a transparent background on mobile, so I'm not really sure why it's showing as white... sorry :(

★ ThemeUp: Nifty Upgrades for your Shopify Store ★ https://themeup.net
0 Likes
Highlighted
New Member
1 0 1

Hi I am having the same issue, I tried your code ans it seems to be working but, what exactly I need just the dots on the slideshow itself without the arrows and the pause button. Is it possible?

1 Like
Highlighted
Pathfinder
97 1 17

Hi thinesh,

Did you find a solution for your question, please let me know. Thanks!


@thinesh wrote:

Hi I am having the same issue, I tried your code ans it seems to be working but, what exactly I need just the dots on the slideshow itself without the arrows and the pause button. Is it possible?


 

TTL CIC - - a Company limited by guarantee with charitable objectives.
0 Likes
Highlighted
Tourist
6 0 1

I have the same problem.
Can anyone help me. 

0 Likes
Highlighted
Tourist
6 0 1

did you solve this problem? :(

1 Like
Highlighted
Pathfinder
97 1 17

Yes, but now I have another small problem. The solution works fine with Firefox but with Chrome there appears a light blue frame around the pause/reload button. It's not too bad but we'd rather we didn't have this shape of random colour appearing in the slide images - if possible. Can someone who knows please help?

 

The solution to lose the arrows and the dark rectangular shape that appears when hovering over the slider navigation is this (applies to 2018 version of Debut):

 

Add to the end of theme.scss.liquid -

 

.slideshow__arrows {
background: transparent;
}
.slideshow__arrow.slideshow__arrow-left, .slideshow__arrow.slideshow__arrow-right {
display: none;
}
 
.slideshow__controls:hover .slideshow__arrows, .slideshow__controls:focus .slideshow__arrows, .slideshow__controls--hover .slideshow__arrows {
background: transparent;
}

 

 

 

 

TTL CIC - - a Company limited by guarantee with charitable objectives.
0 Likes
Highlighted
Tourist
6 0 1
Please help me!!!
How did you solve the first problem?
I want the banner of the slaider to be transparent also on the mobile! But I succeed only on the desktop:(
0 Likes