How can I improve the slideshow on my ecommerce store?

[HHloot]

Hello, 

I recently saw a shop with a slideshow and liked the way they putted it. So I decided to put a slideshow as well on my shopify store. However it doesn't look the same as I wanted it to look like.

Here is the expectation : 

Here is the one on my shopify store :

I would like to only have the little 3 points without the arrows and the pause button and making the little 3 points transparent in the picture just like in the expectation image.

Can someone help me do that ?

Here is the link for my shopify store : https://blenderpure.com

Many thanks to anyone who will provide any kind of help.

Best-reguards.

[ZenoPageBuilder]

Hello @HHloot 👋

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.slideshow__controls {
    bottom: 32px !important;
}

.slideshow__controls > button {
    display: none !important;
}

.slider-counter__link .dot {
    background-color: #FFFFFF80 !important;
}

.slider-counter__link--active .dot {
    background-color: #FFFFFF !important;
}

.slider-counter__link--active

The result

Hope that helps!

[HHloot]

Thank you so much, this is exactly what I wanted! However I've got a small problem. It seems that when you first land on the page, when you scroll down, arrives a point when you get to the slideshow, where you can move the slideshow picture up down (and it's not supposed to move up and down). Resulting in a mess with where the 3 points of the slideshow are located in the picture. Here is a video to illustrate that.

Video : https://www.veed.io/view/cd57887a-31ea-457e-85c1-4d54e538325c?panel=share

Is there a way to fix that ?

[ZenoPageBuilder]

Can you share the video file here? Veed requires me to sign up to view the video.

[HHloot]

Sorry I forgot to make it public, you should have acess to it now.

[BSS-Commerce]

1. Go to theme -> edit code, find file name "component-slideshow.css"

Add the following code

z-index: 3 -> will make the button on the top of slider and you can click it

 .slideshow__controls {
   position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    border: none;
    z-index: 3;
 }

.slider-button {
  visibility: hidden;
}

The result will be like:

mobile