Customizing the slider navigation arrows

The following is a simple snippet which describes how to replace the sliders default navigation arrows with icons. The method detailed below will also make it possible to use an image or whatever you want as navigation for your slider.

PHP code

Is there a filter hook available to do that? Yes, there are actually two hooks.

In class-content-slider, you will find those lines of codes :

<?php if ( count($slides) > 1 ) : ?>
<a class="left carousel-control" href="#customizr-slider" data-slide="prev">
<?php echo apply_filters( 'tc_slide_left_control', '&lsaquo;' ) ?>
</a>
<a class="right carousel-control" href="#customizr-slider" data-slide="next">
<?php echo apply_filters( 'tc_slide_right_control', '&rsaquo;' ) ?>
</a>
<?php endif; ?>

We are going to replace the default values of the filters :  ‘tc_slide_left_control’  and ‘tc_slide_right_control’  by a custom markup with a callback function.

Here ‘s the PHP code to copy in your functions.php :

add_filter('tc_slide_left_control' , 'my_custom_buttons');
add_filter('tc_slide_right_control' , 'my_custom_buttons');

function my_custom_buttons() {
    printf('<span class="slider-button-%1$s"></span>',
        ( 'tc_slide_left_control' == current_filter() ) ? 'left' : 'right'
    );
}

CSS Code

In this example, I use icons from the Entypo font-icon included in the theme, but you can use an image background if needed.

Here’s the code to copy in your style.css file or in the Custom CSS section.

.slider-button-left:before, .slider-button-right:before {
	font-family: 'entypo';
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 0;
	-webkit-font-smoothing: antialiased;
}

.slider-button-left:before {
	content:'\E759';
	float: left;
}
.slider-button-right:before {
	content:'\E75A';
	float: right;
}

The good thing about using those icons is that they inherit the hover pseudo-class properties of the parent link (carousel-control), meaning that you don’t have to worry about the hovering color of those custom navigation icons, they will use the main color of your skin.

I hope this will be useful and your feedbacks or implementation examples are always welcome!