Classic Slider Element Custom Navigation

Classic Slider Element Custom Navigation:

Put a class “slider-navigation-container” on the container (row/column) where the custom navigation are placed

/*Classic Slider Element Custom Navigation*/
jQuery(function($){
   $('.slider-navigation-container a').click(function(){
       // get index of clicked circle
       var circle_index = $(this).index();
       // get clicked circle object
       var clicked_circle = $('.flex-control-paging li:eq(' + circle_index + ') a');
       // remove active slide class to all
       $('.slider-navigation-container a').removeClass('active-slide');
       // trigger click to the default navigation of the slider
       $('.flex-control-paging li:eq(' + circle_index + ') a').trigger('click');
       // add 'active-slide' class to the clicked circle
       $(this).addClass('active-slide')
   });
});


/*Additional CSS*/
/*Active nav color*/
.active-slide i {
  background-color: #fff !important;
}
/*Hide the default navigation*/
.flex-control-nav.flex-control-paging {
  display: none;
}