Converting slider arrows to dot slider

Question

I'm trying to figure out how to change the arrows on a slider to dots at the bottom. Here's the current code for the arrows:

<div class="home-slide-arrows">
    <div class="home-slide-prev"><div class="inner"></div></div>
    <div class="home-slide-next"><div class="inner"></div></div>
</div>

Website is scenesongs.com -- it is the second slider.

Answer 1

You use this image for arrows: https://scenesongsuploads.s3.amazonaws.com/wp-content/themes/SceneSongs/library/images/arrows.png

So you can make a new image containing dots at the same positions and replace existing file arrows.png with the new one.

Answer 2

.home-slide-arrows .home-slide-prev.home-slide-next etc...

Are all using this image:

https://scenesongsuploads.s3.amazonaws.com/wp-content/themes/SceneSongs/library/images/arrows.png

Change it to whatever you want it to be.