Product carousel arrows invisible!

There's not a setting for this in 7.1, but you can change the colour of the carousel controls by adding some CSS to Design > Custom CSS. For example:

.ProductItem .ProductItem-gallery-carousel-controls>div::after {
  border-color: #e1e1e1;
}

Thank you so much.  That was exactly what I was looking for.  I tried every variation I could think of - so simple when you see the answer!!  Thanks again. 

@paul2009 

1. Right now the code I have is only adding arrows to my mobile view.  Is there a way to add arrows the the desktop view also?

Current CSS:

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
}

2. Also, I am interested in a similar arrow style like the described in the original post here.  Can I have black arrows with a white or grey background?

joeystephensmusic.com

password: helpneeded

Try edit code to this

.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}