How to create product slider in wordpress/Woo-commerce?

//Link js file with wordpress

function enqueue_files(){

wp_enqueue_script( 'jquery', get_stylesheet_directory_uri() . '/js/jquery.min.js');

}
add_action("wp_enqueue_scripts","enqueue_files");


<style>
<!----------------- paste css in style.css file only------------------->
<!------------in woocommerce product slide effect css----------------->

.outer_image_container {
position: relative;
}

.show_box_effect {
position: absolute;
background: #2f2f2f;
width: 80%;
height: 1%;
top: -80%;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transition: 0.5s all;
z-index: -1;
opacity: 0;
display: flex;

}

ul.products li.product:hover .show_box_effect
{
position: absolute;
background: #2f2f2f;
width: 80%;
height: 80%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transition: 0.5s all;
z-index: 1;
opacity: 1;
display: flex;

}

a.custom_add_to_cart {
background: none;
text-align: center;
align-items: center;
margin: auto;
position: relative;
display: inline-block;
vertical-align: middle;
width: auto;
font-family: open sans condensed,sans-serif;
font-size: 14px;
line-height: 2em;
font-weight: 300;
text-transform: uppercase;
outline: 0;
padding: 4px 14px;
box-sizing: border-box;
transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
color: #fff;
border: 1px solid #c9ab81;
overflow: hidden;
cursor: pointer;
border-radius: 0px;
z-index: 9999;
text-decoration: none;
}


.custom_add_to_cart:after {


background: white;
position: absolute;
top: -1px;
width: 4px;
right: 18px;
content: '';
transform: rotate(30deg) scale(0, 1);
height: 1px;
transition: 0.5s all ease-in-out;


}


.custom_add_to_cart:hover:after {

background: white;
position: absolute;
top: 10px;
right: 0px;
width: 6px;
content: '';
transform: rotate(30deg) scale(10, 1);
height: 1px;
transition: 0.5s all ease-in-out;
}

a.custom_add_to_cart:before {
background: white;
position: absolute;
top: 39px;
left: 27px;
width: 8px;
content: '';
transform: rotate(30deg) scale(0, 1);
height: 1px;
transition: 0.5s all ease-in-out;


}

.custom_add_to_cart:hover:before {

background: white;
position: absolute;
top: 39px;
left: 27px;
width: 8px;
content: '';
transform: rotate(30deg) scale(10, 1);
height: 1px;
transition: 0.5s all ease-in-out;



}



main#main {
max-width: 100% !important;
}


<!------------Owl-carousal css----------------->


.owl-nav {
float: right;
padding: 0px 30px;
}


button.owl-prev span {
padding: 3px 15px;
background: #f1f1f1;
border-radius: 200%;
font-size: 24px;
outline: none;
border: none;
margin-right: 5px;
border: 1px solid #bdb6b6;
}
button.owl-prev span:focus {

outline:none;

}

button.owl-next span {

padding: 3px 15px;
background: #f1f1f1;
border-radius: 200%;
font-size: 24px;
outline: none;
border: 1px solid #bdb6b6;
margin-left: 5px;

}


button.owl-next,button.owl-prev {
outline: none;
}



</style>

<?php

// create product carousel shortcode
function get_product_carousel(){

?>


<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/owl.carousel.min.css'; ?>">
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/owl.theme.default.min.css'; ?>">

<script src="<?php echo get_stylesheet_directory_uri().'/js/owl.carousel.min.js'; ?>"></script>
<script src="<?php echo get_stylesheet_directory_uri().'/js/mousewheel.min.js'; ?>"></script>
<script src="<?php echo get_stylesheet_directory_uri().'/js/owl.carousel.js'; ?>"></script>


<script>

jQuery(document).ready(function($){
var owl = $('.owl-carousel');
owl.owlCarousel({
loop:true,
nav:true,
items:4,
margin:10,
autoplay:true,
autoplayTimeout:4000,
autoplayHoverPause:true
});




owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
});

</script>





<ul class="products">

<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 12
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
?>
<div class="owl-carousel">
<?php

while ( $loop->have_posts() ) : $loop->the_post();

wc_get_template_part( 'content', 'product' );


endwhile;
?>
</div>
<?php

} else {
echo __( 'No products found' );
}
wp_reset_postdata();
?>
</ul><!--/.products-->
<?php

}
add_shortcode('get-product-carousel','get_product_carousel');


<!-----------------------Paste it where you want----------------------------->

<?php echo do_shortcode('[get-product-carousel]'); ?>