Customizing the slider navigation arrows


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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 :

 

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 :

 

 

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.

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!


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



24 thoughts on “Customizing the slider navigation arrows

  • Claire Béteille

    This snippet does not work for me in version 3.4+

    The workaround is to use return sprintfin place of printf`
    as below:

  • Engin

    This Snippet didnt work for me.
    It showed the Icons but they just had no fucntion in them. I could not click on them and make the slider … well slide.

    This is how i solved it. Maybe someone has the same issue.

    after that set the position of the arrows via css

    • Engin

      Oh my URL got removed from the code here is the function again

      and the same with right

  • Marie

    Hi ! I’d like to change the color of the bottom arrow (the one allowing to come back to the top of the page) do you have an idea of what is needed to change ?
    Thanks,
    Marie

    • Nicolas Post author

      Slider controls are hidden by default on mobile since the theme supports the swipe with fingers features on those devices.

      If you need to reactivate the controls on mobile devices, you’ll need to add a code snippet into your functions.php file.

      Hope this helps !

  • kuldeep

    thanks nicolas, i tried addin this to my child theme and it didn’t work. any clues? thanks again!

    .carousel-inner > .active,
    .carousel-inner > .next,
    .carousel-inner > .prev {
    display: block;
    }

  • kuldeep

    hi, is there a code snippet, or a way to make these arrows always visible and not become visible on a ‘mouse-over’ on the carousel? it’d help someone know at a glance that there are more images to come.

    you can see my work-in-progress site at bent.co.in/wordpress/

    thanks, kuldeep

    • Nicolas Post author

      Hi, they are by default set not visible with a simple CSS line of code. You can easily add your custom css to make them visible.
      Hope this will help!

  • shahrooz sharifi

    hi,i want to remove Bullets caption Carousel in bootstrap but i want to have writes without bulleted contorol…can you help me?? 🙂

  • Andrea

    Great, it worked perfectly!
    I’m super happy about the theme and I’m going to buy the extension for more featured pages.
    Until three days ago I had never seen a WordPress dashboard and now I have a more than decent website.
    There is still a lot of work to do though, so expect few more questions!
    🙂

  • Andrea

    Hi Nicolas, how can I simply change the color of the arrows? With some pictures the default grey kind of disappears.
    Many thanks for this an for the beautiful theme!

    Regards.

    • Nicolas Post author

      Hi Andrea,
      The color of the carousel arrows is controlled by the following CSS code :

  • Christen Thompson

    Hello,

    How can I replace the previous and next button with hover dots that show the corresponding slide on click?

    So if they have added 3 photos to the slider I show three circles across the bottom of the viewer. If they click the 2nd one it jumps to the second. If they click the 3rd it jumps to the third etc.
    The cycling of photos still happens as is normally set..
    If they add more photos then I display more circles to click. n circles for n numbers of photos.

    Thanks!

Comments are closed.