Flexslider product page image carousel – show nav arrows on hover

  • Dear all,

    I’m trying to make a carousel style image slider for my single product page images using flexslider in Storefront theme.

    I just can’t figure out how to make the navigation arrows show on hover *only*…

    As far as I can read, this functionality should be part of the standard flexslider setting, so I wonder what I am doing wrong?

    Can anyone here guide me in the right direction? It would really be much appreciated!

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter oldteaseller

    (@oldteaseller)

    For reference,

    this is the php and css code that I used to make the carousel slider on my single product page:

    in my child .functions file:

    add_filter( ‘woocommerce_single_product_carousel_options’, ‘ud_update_woo_flexslider_options’ );

    function ud_update_woo_flexslider_options( $options ) {
    $options[‘directionNav’] = true;

    return $options;
    }

    in my child style.css:

    .flex-direction-nav {
    position: absolute;
    top: 30%;
    z-index: 99999;
    width: 140%;
    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: 70px; font-weight: 900;
    color: rgba(255, 255, 255, 0.7)}
    a.flex-next:hover:after{
    color: white;
    -webkit-transition: color .3s linear;
    -moz-transition: color .3s linear;
    -ms-transition: color .3s linear;
    -o-transition: color .3s linear;
    transition: color .3s linear;

    }

    a.flex-prev::before {
    visibility:visible;
    content: “\f053”;
    font-family: ‘Font Awesome 5 Free’; margin-left: 10px;font-size: 70px;color: rgba(255, 255, 255, 0.7)}
    a.flex-prev:hover:before{
    color: white;
    -webkit-transition: color .3s linear;
    -moz-transition: color .3s linear;
    -ms-transition: color .3s linear;
    -o-transition: color .3s linear;
    transition: color .3s linear;

    }

    (thanks to the people of this thread: https://stackoverflow.com/questions/46353307/navigation-arrows-in-woocommerce-3-x-product-gallery-slider)

Viewing 1 replies (of 1 total)
  • The topic ‘Flexslider product page image carousel – show nav arrows on hover’ is closed to new replies.