Slideshow Simple CSS

#1. Add a background behind arrows

button.gallery-slideshow-control-btn {
    background-color: #f1f !important;
}

#2. Add a circle behind arrows

button.gallery-slideshow-control-btn {
    background-color: #f1f !important;
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#3. Change slideshow simple arrow color

button.gallery-slideshow-control-btn svg {
    stroke: green !important;
}

#4. Change arrow size

button.gallery-slideshow-control-btn svg {
    width: 30px !important;
    height: 50px !important;
}

#5. Make arrow bigger on hover

div.gallery-slideshow-control:hover svg {
    transform: scale(1.5);
    transition: all 0.3s ease;
}
div.gallery-slideshow-control svg {
    transition: all 0.3s ease;
}

#6. Change arrow color on hover

div.gallery-slideshow-control:hover svg {
   stroke: red;
}

#7. Add an outline border around thumbnails

button.gallery-slideshow-thumbnails-thumb {
    border: 2px solid #000;
}

#8. Round corners of thumbnails

button.gallery-slideshow-thumbnails-thumb {
    border-radius: 10px;
}

#9. Increase space between thumbnails

button.gallery-slideshow-thumbnails-thumb {
    margin-right: 30px;
}

#10. Change size of thumbnails

button.gallery-slideshow-thumbnails-thumb {
    width: 40px;
    height: 40px;
}