php – Woocommerce Single Product Gallery Slider

Question

I made a slider for the main image, the arrows are not visible but on mobile the arrows are visible.

and finally how can I fit the thumbnails so that a total of 4 will appear and when I scroll the main image they will also be scrolled.

Thanks in advance

Link to Single Product Page

functions.php

function cuswoo_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;

    return $options;
}

CSS

ul.flex-direction-nav {
    position: absolute;
    top: 30%;
    z-index: 99999;
    width: 100%;
    left: 0;
    margin: 0;
    padding: 0px;
    list-style: none;}

li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}

a.flex-next::after {
    visibility:visible;content: 'f054';
    font-family: 'Font Awesome 5 Free';
    margin-right: 10px;
    font-size: 20px;   
    font-weight: bold;
}
a.flex-prev::before {
    visibility:visible;
    content: 'f053';
    font-family: 'Font Awesome 5 Free';   
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
}
ul.flex-direction-nav li a {
    color: #ccc;
}
ul.flex-direction-nav li a:hover {
    text-decoration: none;
}


0
Ferhat 1 month 2021-10-18T05:25:01-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse