Show nav arrows on hover only – Flexslider product page image slider

  • Resolved oldteaseller

    (@oldteaseller)


    4 years, 7 months ago

    Dear all,

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

    So far it works alright, BUT I just can’t figure out how to show the navigation arrows on hover *only*…

    As far as I can read, this functionality should be part of the standard setting of flexslider, 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!

    • This topic was modified 4 years, 7 months ago by oldteaseller.
    • This topic was modified 4 years, 7 months ago by oldteaseller.
    • This topic was modified 4 years, 7 months ago by oldteaseller.

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

Viewing 3 replies - 1 through 3 (of 3 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)

    Fingers crossed that someone here are able to help fix the navigation arrows!

    You can add the following CSS code to make the arrows appear only on hover:

    .flex-direction-nav .flex-nav-prev,
.flex-direction-nav .flex-nav-next {
  opacity: 0;
}

.flex-direction-nav:hover .flex-nav-prev,
.flex-direction-nav:hover .flex-nav-next {
  opacity: 1;
}
    Thread Starter oldteaseller

    (@oldteaseller)

    Thank you so much, @senff. It finally works!

    Just for future reference: your code makes the arrows appear only when hovering the .flex-direction-nav area, which in my case is in the middle of the image. So I added the below css code to make the arrows appear from the moment one hovers anywhere on the image area ( = .flex-viewport):

       .flex-viewport:hover ~ .flex-direction-nav .flex-nav-prev,
.flex-viewport:hover ~ .flex-direction-nav .flex-nav-next  { opacity: 1 }

    Thanks a lot again.

    • This reply was modified 4 years, 7 months ago by oldteaseller.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Show nav arrows on hover only – Flexslider product page image slider’ is closed to new replies.