How to make slider for woocommerce related product?

Hi everyone, today i am going to show you how to implement slider for woocommerce related products.

Required condition:
1> Here we are using bx slider so i hope you everyone know how to set up bx slider on our theme.
Here is the link: http://bxslider.com/
2> All of you know how hook function on wordpress.

Here we start:

Our first steps is to align all the related products on single row so we are using [woocommerce_output_related_products_args ] hooks. And on customizer i have given user interface to select how many product to display on slider.For this you can see here: https://sushilwp.wordpress.com/2016/01/31/how-to-change-number-of-woocommerce-related-through-customizer-setting/

Here is the code , how i did it:

step 1:

add_filter( 'woocommerce_output_related_products_args', 'themeslug_related_products_argsS' );

function themeslug_related_products_argsS( $args ) {

$args['posts_per_page'] = get_theme_mod( 'stwo_number_related_products', '5' );
$args['rows'] = 1;

return $args;
}

Then we should remove the float of related product. so place this code somewhere on css files:

.st-woocommerce-related-product .related ul.products li.first, .st-woocommerce-related-product .related ul.products:after {
clear: none;
}

Step: Finally you need to apply bx slider at the parent elements. Then add this following code on js file:

$('.related ul.products').bxSlider({
slideWidth: 173,
minSlides: 2,
maxSlides: 2,
moveSlides: 4,
slideMargin: 20,
pager: false,
responsive: true
});

Please refer on tutorial on how to make responisve slider. YOu can learn on above option here http://bxslider.com/options

Here is the final output:

Let me know if you have any question or queries or any other best solution.

Thanks