Product slider: The arrows are not where they should be

[Shano96]

Hello,

I have added a product slider. On desktop the arrows are not where they should be. (see picture) The mobile version is great, exactly as it should be, but not on the desktop.

Could someone help me there briefly ?

Thank you!

[dmwwebartisan]

@Shano96

Please share your store URL!

Thanks!

[Shano96]

Thank you for your message @dmwwebartisan . I have sent you the URL via direct message

[dmwwebartisan]

@Shano96

ok

[dmwwebartisan]

@Shano96

Please add the following CSS code to your assets/pagefly-main.css or assets/theme.css bottom of the file.

.product-image-slider .fas.fa-chevron-circle-left{position: absolute;top: 50%;left: 10px; z-index: 9; float:left;}

.product-image-slider .fas.fa-chevron-circle-right{position: absolute; top: 50%; right: 10px;float: right; z-index: 9;}

Thanks!

[Shano96]

You are a legend @dmwwebartisan . Thank you very much. Thank u.

Do you happen to know how to get to see all the product images under the product image? I have marked it in red on the picture.

Do you know what I mean?

[Shano96]

hey @dmwwebartisan , when you changed that, those dots that are seen on mobile version are not on desktop. Could you look again briefly, whether we can get the points on the desktop?

[dmwwebartisan]

@Shano96

Please add the following CSS code to your assets/pagefly-main.css or assets/theme.css bottom of the file.

@media only screen and (min-width: 750px){
.product-image-slider-item button[type=button] {
    display: inline-block;
    background: #ddd;
    overflow: hidden;
    text-indent: -999px;
    border-radius: 100%;
    width: 10px;
    height: 10px;
    box-shadow: inset 0 1px 1px 0 #999;
}
}

Thanks!

[Shano96]

Thank you so much @dmwwebartisan , on the desktop product page, the black dot is not visible when you slide in the images. So you know this is the current image. On the mobile version everything is great only on the desktop. Thank you so much for your help!

[Shano96]

I got it! Please add the following CSS code to your assets/pagefly-main.css or assets/theme.css bottom of the file.

.product-image-slider-item li[class=slick-active] button {
    background: linear-gradient(#000000, #2b2b2b);
    box-shadow: inset 0 0 1px 1px #000000;
  }
}

@dmwwebartisan

[Shano96]

last question,really! @dmwwebartisan I would like to see on the mobile version when I slide the images, like on this picture, that when you slide you can already see that there are several images. Do you understand what I mean?