Create custom carousel slider with custom post type using Slick slider library

Create custom carousel slider with custom post type using Slick slider library

<!------- Create Custom post Type Crousel Slider Using Slick Slider ---------->
<?php
$team_slider_html = '';

$args = array(
    'post_type' => 'product',
    'post_status' => 'publish',
    'posts_per_page' => 10,
);
$query = new WP_Query( $args );
$team_slider_html .= '<section class="center slider hometeam_slider">';
while ( $query->have_posts() ) : $query->the_post();
    if (has_post_thumbnail( get_the_ID() ) ){
        $image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' );
        $featured_image = $image[0];
    }else{
        $featured_image = site_url().'/wp-content/uploads/2017/10/report-covers.png';
    }
    $team_slider_html .= '<div class="single_team_slide"><div class="single_slide_inner">';
    $team_slider_html .= '<div class="team_member_image"><img src="'.$featured_image.'"></div>';
    $team_slider_html .= '<div class="team_member_excerpt">'.get_the_excerpt().'</div>';
    $team_slider_html .= '<div class="team_member_name">'.get_the_title().'</div>';
    $team_slider_html .= '<div class="team_member_designation">'.get_post_meta( get_the_ID(), '_position', true ).'</div>';
    $team_slider_html .= '</div></div>';
endwhile;
$team_slider_html .= '</section>';

echo $team_slider_html;
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js'></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
jQuery(document).on('ready', function() {
    jQuery(".center").slick({
        dots: true,
        infinite: true,
        centerMode: true,
        autoplay: true,
        arrows: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });
});
</script>