slickスライダー

t-slder

.t-slider {
	position: relative;

	&__item {
		padding: 0 1.0rem;
		@include sp {
			padding: 0 1.6rem;
		}
	}

	.slick-dotted {
		padding-bottom: 2.2rem;
		margin-bottom: 0;
	}

	.slick-arrow {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		padding: 0;
		width: 2.0rem;
		height: 3.8rem;
		color: transparent;
		z-index: 1;
		transition: opacity 0.5s;
		z-index: 1;
	}
	.slick-arrow:hover {
		opacity: 0.7;
	}

	.slick-next::before,
	.slick-next::after,
	.slick-prev::before,
	.slick-prev::after {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		content: "";
		vertical-align: middle;
	}

	.slick-next::after,
	.slick-prev::after {
		width: 2.6rem;
		height: 2.6rem;
		border-top: 1px solid $font_color;
		border-right: 1px solid $font_color;
	}

	.slick-next {
		right: -2.6rem;
	}
	.slick-next::after {
		right: 0.4rem;
		transform: rotate(45deg);
	}

	.slick-prev {
		left: -2.6rem;
	}
	.slick-prev::after {
		left: 0.4rem;
		transform: rotate(-135deg);
	}

	@include sp {
		.slick-next::after,
		.slick-prev::after {
			width: 1.0rem;
			height: 1.0rem;
		}
		.slick-next {
			right: 0;
		}
		.slick-prev {
			left: 0;
		}
		.slick-next::after {
			right: 2px;
		}
	}

}

通常スライダー

<script>
	jQuery(function($){
		$('.slider').not('.slick-initialized').slick({
			infinite: true,
			dots:true,
			arrows:true,
			slidesToShow: 3,
			slidesToScroll: 3,
			responsive: [{
				breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
				}
			},{
				breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                }
			}]
		});
	});
</script>
						<div class="t-slider"><!--t-slider-->
                            <div class="slider">
<?php
    $post_type = 'news';
    $args = array(
		'post_type' => $post_type,
		'posts_per_page'  => '6'
	);
    $the_query = new WP_Query($args);
?>
<?php if($the_query->have_posts()): ?>
<?php while($the_query->have_posts()) : $the_query->the_post(); ?>
                                <div class="t-slider__item">
                                    <a href="<?php the_permalink();?>" class="u-disp_b">
                                        <div class="u-part">
                                            <div class="u-afix_1">
                                                <div class="u-afix__item u-bg_cover" style="background-image: url('<?php the_post_thumbnail_url();?>');"></div>
                                            </div>
                                        </div>
                                        <p class="u-mb0"><?php the_title();?></p>
                                    </a>
                                </div>
<?php endwhile; endif; wp_reset_postdata(); ?>       
                            </div>
                        </div><!--/t-slider-->