Answers for "product gallery slider for woocommerce"

woocommece gallery slider with arrowws

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;
}

woocommece gallery slider with arrowws

add_filter( 'woocommerce_single_product_carousel_options', 'sf_update_woo_flexslider_options' );
/** 
 * Filer WooCommerce Flexslider options - Add Navigation Arrows
 */
function sf_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;

    return $options;
}

woocommerce gallery product images widget vertical swipe

/* VERSION 1 - Vertical Scrolling Thumbnails */

.woocommerce div.product div.images .flex-control-thumbs li {
    padding: 5px 5px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media (min-width: 420px) {
    .woocommerce-page div.product div.images {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-item-align: center;
        align-self: center;
    }
    .woocommerce div.product div.images .flex-control-thumbs {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 80px;
        flex: 1 0 80px;
        /* Adjust PX to suit width of thumbnails */
        max-height: 425px;
        /* Adjust Height to Image height on desktop */
        overflow: auto;
    }
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 100%;
        padding: 0 10px 10px 0;
    }
}

/* VERSION 2 - Horizontal Scrolling Thumbnails */

.woocommerce div.product div.images .flex-control-thumbs li {
    padding: 5px 5px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 25%;
    flex: 1 0 25%;
}

.woocommerce div.product div.images .flex-control-thumbs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: auto;
}