Menu icon Foundation
Change the images of arrows (Orbit Slider)

Hello!

I am newbie to foundation. I am using for my project foundation 6 via JointsWP.

I would like to ask you, how to change the images of arrows from orbit slider.

Thanks in Advance,

Yours Sincerely,

Orbit

Hello!

I am newbie to foundation. I am using for my project foundation 6 via JointsWP.

I would like to ask you, how to change the images of arrows from orbit slider.

Thanks in Advance,

Yours Sincerely,

Ercan Murat KISACA over 3 years ago

Try setting a new image src for image.
Here is the default code at JointsWP
HTML
<button class="orbit-previous" tabindex="0"><span class="show-for-sr">Previous Slide</span><img draggable="false" class="emoji" alt="◀" src="http://s.w.org/images/core/emoji/72x72/25c0.png"></button>

You can try below for adding a local image:

<button class="orbit-previous" tabindex="0"><span class="show-for-sr">Previous Slide</span><img draggable="false" class="emoji" alt="" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/XXX.jpg"></button> 

You should do this for next button too.

Hope this helps

Antonis Iliadis over 3 years ago

Thanks for the quick answer.

Sorry for the next question: But after so many hours of work I cannot understand the logical of foundation... Where is this code?

Sorry if I am asking stupidities!

Thanks in Advance,

Ercan Murat KISACA over 3 years ago

Feel free to ask anything in your mind.

How did you add Orbit Slider in JointsWP? I can help more specificly after learning this.

Antonis Iliadis over 3 years ago

I added the shortcode to my page on Wordpress and has blue arrows. I saw with firebug and it is png image! ! I am using (JointsWP)!

Thank you really,

Rafi Benkual over 3 years ago

What @Ercan Murat KISACA posted is the HTML that contains the button.

<button class="orbit-next" aria-label="next" tabindex="0"><span class="show-for-sr">Next Slide</span></button>

You can see the triangle here is just an HTML entity that the browser renders. You can swap this for an image, different character, or whatever.

Jeremy Englert over 3 years ago

If you disable emoji support in WordPress, the arrow will look better. The emoji support in WP causes the arrow in Orbit to use an emoji arrow opposed to an HTML arrow.

You can use a plugin or code a function to remove emoji support.

Plugin: https://wordpress.org/plugins/disable-emojis/
Function: http://www.denisbouquet.com/remove-wordpress-emoji-code/

Rafi Benkual over 3 years ago

@Jeremy Englert That's intersting - did not know that Emoji's can cause that :)

Jeremy Englert over 3 years ago

It's wonky to say the least.

It automatically converts unicode symbols into Emoji's. The arrow used in Orbit is unicode, so WordPress converts it to the ugly blue arrow Emoji.