woocommece gallery slider with arrowws

1add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
2/** 
3 * Filer WooCommerce Flexslider options - Add Navigation Arrows
4 */
5function sf_update_woo_flexslider_options( $options ) {
6
7    $options['directionNav'] = true;
8
9    return $options;
10}
11

1ul.flex-direction-nav {
2    position: absolute;
3    top: 30%;
4    z-index: 99999;
5    width: 100%;
6    left: 0;
7    margin: 0;
8    padding: 0px;
9    list-style: none;}
10
11li.flex-nav-prev {float: left;}
12li.flex-nav-next {float: right;}
13a.flex-next {visibility:hidden;}
14a.flex-prev {visibility:hidden;}
15
16a.flex-next::after {
17	visibility:visible;content: '\f054';
18	font-family: 'Font Awesome 5 Free';
19	margin-right: 10px;
20	font-size: 20px;   
21	font-weight: bold;
22}
23a.flex-prev::before {
24    visibility:visible;
25    content: '\f053';
26	font-family: 'Font Awesome 5 Free';   
27	margin-left: 10px;
28	font-size: 20px;
29	font-weight: bold;
30}
31ul.flex-direction-nav li a {
32	color: #ccc;
33}
34ul.flex-direction-nav li a:hover {
35	text-decoration: none;
36}
37
38