Create Custom Post slider with Post title in thumbnail Using Slick Slider Library

Create Custom Post slider with Post title in thumbnail Using Slick Slider Library

<!------ Create Custom post Slider With Thumbnail Using Slick Slider -------->
<?php
$tax_query4 = array(array('taxonomy' => 'products_type','field' => 'slug','terms' => array('patent-reports')));
$args4 = array(
        'post_type' => 'product',
        'post_status' => 'publish',
        'posts_per_page' => 5,
        'tax_query' => $tax_query4
    );
$query4 = new WP_Query( $args4 );

$new_patents_slider = '';
$new_patents_slider .= '<div class="main">';
$new_patents_slider .= '<div class="slider patents-for smart_patents">';
while ( $query4->have_posts() ) : $query4->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';
    }
    $new_patents_slider .= '<div class="img-responsive main-slide-single">';
    $new_patents_slider .= '<div class="main-slide-left"><img src="'.$featured_image.'"></div>';
    $new_patents_slider .= '<div class="main-slide-right">';
    $new_patents_slider .= '<div class="slider_title">'.get_the_title().'</div>';
    $new_patents_slider .= '<div class="slider_excerpt">'.get_the_excerpt().'</div>';
    $new_patents_slider .= '<a href="'.get_the_permalink().'">Read More</a>';
    $new_patents_slider .= '</div>';
    $new_patents_slider .= '</div>';
endwhile;
$new_patents_slider .= '</div>';
$new_patents_slider .= '<div class="slider patents-nav smart_patents">';
while ( $query4->have_posts() ) : $query4->the_post();
    $new_patents_slider .= '<div>';
    $new_patents_slider .= '<div class="img-responsive">';
    $new_patents_slider .= '<div class="thumb-title">';
    if(strlen(get_the_title()) > 50){
        $new_patents_slider .= substr(get_the_title(), 0,50).' ...';
    }else{
        $new_patents_slider .= get_the_title();
    }
    $new_patents_slider .= '</div>';
    $new_patents_slider .= '<a href="'.get_the_permalink().'">read more</a>';
    $new_patents_slider .= '</div>';
    $new_patents_slider .= '</div>';
endwhile;
$new_patents_slider .= '</div>';
$new_patents_slider .= '</div>';

echo $new_patents_slider;
?>

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

var noof_sliders = jQuery(".slick-initialized.slick-slider").length;
setTimeout(function(){
    for (i = 0; i < noof_sliders; i++) {
        jQuery(".slick-initialized.slick-slider")[i].slick.refresh();
    }
}, .5);
    
/***** Patents Tab jQuery (START) *****/
jQuery('.patents-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    autoplay: true,
    asNavFor: '.patents-nav'
});
jQuery('.patents-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.patents-for',
    dots: false,
    focusOnSelect: true
});
/***** Patents Tab jQuery (END) *****/

</script>