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