How to change SVG arrow icons?
This applies to the following modules when the carousel is enabled: Content Grid, Testimonials, Image Carousel, Logos Grid & Carousel, 3D Slider.
Please add the below code to your current theme’s functions.php file:
// Code to change previous navigation arrow
add_filter( 'pp_prev_icon_svg', 'my_own_prev_icon' );
function my_own_prev_icon( $svg ) {
// change the SVG code here.
$svg = '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M25.1 247.5l117.8-116c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L64.7 256l102.2 100.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L25 264.5c-4.6-4.7-4.6-12.3.1-17z"></path></svg>';
return $svg;
}
// Code to change next navigation arrow
add_filter( 'pp_next_icon_svg', 'my_own_next_icon' );
function my_own_next_icon( $svg ) {
// change the SVG code here.
$svg = '<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z"></path></svg>';
return $svg;
}
Down Arrow
add_filter( 'pp_down_arrow_html', function( $html, $row_settings ) {
// change the SVG code here.
$html = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation"><path stroke="null" d="m1.00122,14.45485c0,-0.24438 0.10878,-0.48877 0.32411,-0.67587c0.4329,-0.37231 1.13663,-0.37231 1.56952,0l19.19382,16.50735l19.19381,-16.50735c0.4329,-0.37231 1.13663,-0.37231 1.56952,0s0.43289,0.97753 0,1.34983l-19.97969,17.18324c-0.43289,0.3723 -1.13662,0.3723 -1.56951,0l-19.97969,-17.18324c-0.21755,-0.1871 -0.32411,-0.43149 -0.32411,-0.67587l0.00222,0.00191z" fill="#000000" id="svg_1"/></svg>';
return $html;
}, 10, 2 );