Customizing the slider navigation arrows

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

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.

 

Where to copy/paste the code above code? I strongly recommend that you create a child theme. Download a start-up child theme here.

Everything you need to know about child theme with Customizr here.

 

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!

24 thoughts on “Customizing the slider navigation arrows”

Comments are closed.