Adding Custom Navigation Bullets to Revolution Slider

[detailsguy]

Hi there,

Wanted to check to see if you had a fix for this. I was hoping to be able to add custom images to replace the navigation bullets for a slider built using Rev Slider. This is where the slider is currently located: http://www.dandelionsblooming.dreamhosters.com/homepage/ and as you can see they are currently set to the “Ares” style bullets within Rev Slider settings.

What I’d like to do is accomplish something similar to this look https://www.mountmadonna.org/ where they have custom images instead of bullets to navigate through their slider.

[rad]

Hi @BodhiJames,

Thanks for reaching out.

Yes, it’s possible, please check this https://www.themepunch.com/faq/change-style-of-bullets/

You can use background images, fontello icons etc instead of the style we created above. There are unlimited possibilities. Important that width and height is defined also, if it is different then the current one, since the calculation of the elements happens in the jQuery plugin.

Example,

.tp-bullets.simplebullets.round .bullet {  
                      background: url(http://example.com/my-custom-bullet.jpg);
                      width: 100px;
                      height: 100px;
                      background-size: cover;
}

Just change the image URL depending on your design and to where it’s uploaded. And the width and height too, the sample dimension will only work on square image.

Hope this helps.

[detailsguy]

Thank you, those details were useful. The selectors weren’t working for some reason so I ended up pulling out the longer selectors which definitely doesn’t look very clean:

rev_slider_2_1 > div.tp-bullets.ares.horizontal.nav-pos-hor-center.nav-pos-ver-bottom.nav-dir-horizontal > div:nth-child(1) {
background: url(http://www.dandelionsblooming.dreamhosters.com/wp-content/uploads/2018/12/mandorla-logo-outline.png);
width: 35px;
height: 35px;
background-size: cover;
}

Had to target both bullets individually, then added a different image on hover. If you have a cleaner way to suggest, I’m all ears, otherwise this works.

Wondering though, I’d like the selected slider to look like the hovered image rather than the regular image. I tried adding .selected class to the above but it doesn’t seem to be working.

Any thoughts?

[ruenel]

Hello @BodhiJames,

Please make use of this code instead:

#rev_slider_2_1 div.tp-bullets.ares.horizontal.nav-pos-hor-center.nav-pos-ver-bottom.nav-dir-horizontal .tp-bullet {
    background: url(http://www.dandelionsblooming.dreamhosters.com/wp-content/uploads/2018/12/mandorla-logo-outline.png);
    width: 35px;
    height: 35px;
    background-size: cover;
}

#rev_slider_2_1 div.tp-bullets.ares.horizontal.nav-pos-hor-center.nav-pos-ver-bottom.nav-dir-horizontal .tp-bullet.selected {
    background: url(http://www.dandelionsblooming.dreamhosters.com/wp-content/uploads/2018/12/mandorla-logo-hover.png);
    width: 35px;
    height: 35px;
    background-size: cover;
}

Please let us know if this works out for you.

[detailsguy]

Thanks so much, this solved it!

[friech]

We are gratified that we’re able to help you with this,

Cheers!