投稿記事スライダー

php

スライドセット一式
参考サイト：https://plusers.net/wordpress_slider

<div id="slider-area">
	<div id="slides" class="slides">
	<div id="slides-inner" class="slides-inner">
<!-- カテゴリの記事IDを表示-->
		<?php $args = array(
		'posts_per_page' => 5,
		'order' => 'DESC',
		'category' => 4 //表示させたいカテゴリID
		);
		$my_query = new WP_Query( $args );?>
		<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<!-- カテゴリの記事IDを表示-->

		<article <?php post_class( 'slidekiji' ); ?>>
		<a href="<?php the_permalink(); ?>">
		<?php the_post_thumbnail('full'); ?>
	<div class="text">
		<span class="kiji-date">
			<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>"><?php echo get_the_date(); ?></time>
		</span>
		<span class="cat-data ">
		<?php if( has_category() ): ?>
		<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
	<?php endif; ?>
		</span>
		<h2><?php the_title(); ?></h2>
	</div>
	</a>
	</article>
	<?php endwhile; ?>
	<?php wp_reset_postdata(); ?>
	</div>
	</div>
	<div id="slides-nav" class="slides-nav"></div>
</div>

JavaScript

jQuery(function($) {
   jQuery('#slides').append('<ul id="pager"><li><a href="#" class="prev">＜</a></li><li><a href="#" class="next">＞</a></li></ul>');
   var pager = jQuery('#pager'),
       slidesWrap = jQuery('#slides'),
       slides = jQuery('#slides-inner'),
       slideKiji = slides.find('.slidekiji'),
       slidenav = jQuery('#slides-nav'),
       current = 0,
       number = slideKiji.length;
   slideKiji.each(function(i) {
       jQuery(this).css({
           left: '100' * i + '%'
       });
       slidenav.append('<a href="#"></a>');
   });
   function navUpdate() {
       slidenav.find('a').removeClass('active');
       slidenav.find('a').eq(current).addClass('active');
   }
   function slider(index) {
       if (index < 0) {
           index = number - 1;
       }
       if (index > number - 1) {
           index = 0;
       }
       slides.animate({
           left: '-100' * index + '%'
       });
       current = index;
       navUpdate();
   }
   pager.find('a').click(function(event) {
       event.preventDefault();
       if (jQuery(this).hasClass('prev')) {
           slider(current - 1);
       } else {
           slider(current + 1);
       }
   });
   slidenav.find('a').click(function(event) {
       event.preventDefault();
       var navIndex = jQuery(this).index();
       navUpdate();
       slider(navIndex);
   });
   var start;
   function timerStart() {
       start = setInterval(function() {
           slider(current + 1);
       }, 3000);//スライドの移動速度
   }
   function timerStop() {
       clearInterval(start);
   }
   slider(current);
   timerStart();
   slideKiji.on({
       mouseover: timerStop,
       mouseout: timerStart
   });
 });

function.php

	//スライダーセット
	function slider_scripts(){
		wp_enqueue_script( 'slider', get_template_directory_uri() .'/js/slider.js', array('jquery') );
		}
	add_action( 'wp_enqueue_scripts' , 'slider_scripts' );
	//IEにも対応
	function ofi_scripts(){
		wp_enqueue_script( 'object-fit-images', get_template_directory_uri() .'/js/ofi.min.js', array('jquery') );
		}
	add_action( 'wp_enqueue_scripts' , 'ofi_scripts' );

CSS

/*--------------------------------------------------------

スライドショー関連

--------------------------------------------------------*/
 .slides {
   position: relative;
   top: 0;
   left: 50%;
   overflow: hidden;
   width: 100%;
   height: 350px;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }

 #slider-area {
   position: relative;
   margin-bottom: 50px;
 }
 
 .slides-inner {
   position: relative;
   top: 0;
   width: 100%;
 }

 .slidekiji {
   position: absolute;
   display: block;
   width: 100%;
   height: auto;
 }

 .slidekiji a {
   position: relative;
   display: block;
   overflow: hidden;
   height: 350px;
 }

 .slidekiji img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .slidekiji .text {
   position: absolute;
   bottom: 0;
   box-sizing: border-box;
   width: 100%;
   padding: 25px 30px 15px;
   background: linear-gradient(top, rgba(255, 255, 255, 0) 2%, #000 100%);
   background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 2%, #000 100%);
   background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 2%, #000 100%);
   background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 2%, #000 100%);
   text-shadow: 0 0 3px #000;
   -moz-text-shadow: 0 0 3px #000;
   -webkit-text-shadow: 0 0 3px #000;
 }

 .slidekiji .kiji-date {
   font-size: .9em;
   color: #fff;
 }

 .slidekiji .cat-data {
   font-size: .9em;
   color: #fff;
   background-color: transparent;
 }

 .slidekiji h2 {
   font-size: 1.5em;
   line-height: 1.4;
   margin: 0;
   color: #fff;
}

 #pager {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }

 #pager .prev, #pager .next {
   line-height: 40px;
   position: absolute;
   top: 0;
   width: 44px;
   height: 40px;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   text-align: center;
   text-decoration: none;
   color: #fff;
   background: #333;
 }

 #pager .prev {
   left: 0;
 }

 #pager .next {
   right: 0;
 }

 .slides-nav {
   position: absolute;
   bottom: -35px;
   left: 0;
   width: 100%;
   text-align: center;
 }

 .slides-nav a {
   display: inline-block;
   width: 12px;
   height: 12px;
   margin: 0 5px;
   border-radius: 50%;
   background: #ccc;
 }
 .slides-nav a.active {
   cursor: default;
   background: #333;
 }

 @media (max-width: 799px) {
   .slides {
     height: 240px;
   }
   .slidekiji a {
     height: 240px;
   }
   .slidekiji h2 {
     font-size: 1.2em;
   }
   .slidekiji .cat-data, .slidekiji .kiji-date {
     font-size: .8em;
   }
   #pager .prev, #pager .next {
     line-height: 8vw;
     width: 8vw;
     height: 8vw;
   }
   .slides-nav a {
     width: 10px;
     height: 10px;
     border-radius: 100%;
   }
 }