カスタム投稿タイプの投稿をまとめて、新着情報として一覧表示

<div class="newtopics_carousel">
	<h3 class="newtopics_heading">NEW TOPICS</h3>
	<ul class="slider">
		<?php
			$custom_posts = get_posts(array(
				'post_type' => array('all_blogs','all_works','all_demos'),
				'posts_per_page' => 6,
			));
			global $post;
		?>
		<?php if($custom_posts): ?>
			<?php foreach($custom_posts as $post): setup_postdata($post); ?>
				<li>
					<article class="news">
						<div class="about-news-icon zoomIn">
							<a href="<?php echo esc_url(get_permalink()); ?>">
								<?php if(has_post_thumbnail()): ?>
                    				<?php the_post_thumbnail('medium'); ?>
            					<?php else: ?>
                					<img src="<?php echo esc_url(get_theme_file_uri('/assets/images/cxglogo_damy001.jpg')); ?>" alt="damy" >
            					<?php endif; ?>
							</a>
						</div>
						<a href="<?php echo get_post_type_archive_link( get_post_type() ); ?>">
							<div class="detail-link">
								<div class="post-category">
									<?php echo esc_html(get_post_type_object(get_post_type())->label); ?> 
								</div>
							</div>
						</a>
						<time class="time"><?php the_time( 'Y.m.d' ); ?></time>
						<a class="detail-link" href="<?php echo esc_url(get_permalink()); ?>">
              				<p class="title"><?php the_title(); ?></p>
              				<p class="news-text"><?php echo get_the_excerpt(); ?></p>
						</a>
        			</article>
				</li>
			<?php endforeach; ?>
		<?php endif; wp_reset_postdata(); ?>
	</ul>
</div>														

$('.slider').slick({
	autoplay: true,
	infinite: true,
	slidesToShow: 3,
	slidesToScroll: 1,
	prevArrow: '<div class="slick-prev"></div>',
	nextArrow: '<div class="slick-next"></div>',
	dots: true,
	responsive: [
		{
		breakpoint: 1250,
		settings: {
			slidesToShow: 2,
			slidesToScroll: 1,
		}
		},
		{
			breakpoint: 740,
			settings: {
				slidesToShow: 1,
				slidesToScroll: 1,
			}
		}
	]
});

.slider {
   width: 100%;
   margin: 0 auto;
}

.slider .slick-slide {
    margin: 0 30px;
}

.slick-prev, 
.slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    height: 20px;
    width: 20px;
	z-index:5;
}

.slick-prev {
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {
    right: -1.5%;
    transform: rotate(45deg);
}

.slick-dots {
    text-align:center;
	margin:5px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
    background: #ccc;
}

.slick-dots .slick-active button{
    background: #333;
}

@media screen and (min-width: 740px) {

	.slider .slick-slide {
    	margin: 0 15px;
	}
	
	.slick-prev {
    	left: -3%;
	}
	
	.slick-next {
		right: -3%;
	}
	
	.slick-dots {
		margin: 25px 0 25px 0;
	}
	
}

@media screen and (min-width: 1250px) {
	
	.slick-prev {
    	left: -2%;
	}
	
	.slick-next {
		right: -2%;
	}
}