CSSでカルーセルスライダー

WordPressのテーマ、ストークではトップページにカルーセルスライダーを簡単に設置できる。

pickup というタグが付いている記事が、順に横に流れるように表示される。

このスライダー機能には、Jquery が使用されている。

 

このスライダーをjs なしでCSSだけで実現できないかと模索してみた。

 

parts_homeheader.php 等のスライダーを表示したい場所に、次のように記述する。

<?php if ( is_front_page() || is_home() ) : ?>
<?php		  
$args = array(
    'posts_per_page' => 13,
    'offset' => 0,
    'tag' => 'pickup',
    'meta_key' => 'views',
    'orderby' => 'meta_value_num',
    'order' => 'DESC',
    'post_type' => array('post','page'),
    'post_status' => 'publish',
    'suppress_filters' => true,
    'ignore_sticky_posts' => true,
    'no_found_rows' => true
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
$count=1; // ループの前に最初の数字を代入
	?>

<div id="top_carousel" class="css-sliderwrap carouselwrap wrap cf">

<!-- スライダー部 -->
<div id="stage">
	<input id="r1" type="radio" name="slider8">
	<input id="r2" type="radio" name="slider8">
	<input id="r3" type="radio" name="slider8">
	<input id="r4" type="radio" name="slider8">
	<input id="r5" type="radio" name="slider8">
	<input id="r6" type="radio" name="slider8">
	<input id="r7" type="radio" name="slider8">
	<input id="r8" type="radio" name="slider8">
	
  <!-- スライド群 -->
<ul id="photos" class="css-slider-li">

<?php while ( $the_query->have_posts() ) {
$the_query->the_post();
?>
<li id="photo<?php echo $count;?>" class="pic">

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php
$cat = get_the_category();
$cat = $cat[0];
?>
<?php if ( has_post_thumbnail()) : ?>
<?php $post_title= get_the_title(); ?>
<figure class="eyecatch">
<?php the_post_thumbnail('wpp348x208', array( 'alt' => $post_title,'title' => $post_title )); ?>
<span class="wpp-views"><?php if(function_exists('the_views')) { the_views(); } ?></span>
<span class="osusume-label cat-name cat-id-<?php echo $cat->cat_ID;?>"><?php echo $cat->name; ?></span>
</figure>
<?php else: ?>
<figure class="eyecatch noimg">
<img src="<?php echo get_template_directory_uri(); ?>/library/images/noimg.png">
<span class="wpp-views"><?php if(function_exists('the_views')) { the_views(); } ?></span>
<span class="osusume-label cat-name cat-id-<?php echo $cat->cat_ID;?>"><?php echo $cat->name; ?></span>
</figure>
<?php endif; ?>
<h2 class="h2 entry-title"><?php the_title(); ?></h2>
</a></li>
<?php 
$count  ; // 次のループの前に数字を増やす
} ; ?>
</ul>
  <!-- スライダー部の高さ確保 -->
  <div  class="padding-top"></div>
  <!-- スライドボタン -->
  <div id="btns">
  	<label for="r1" id="btn1" class="p_bar"></label>
  	<label for="r2" id="btn2" class="p_bar"></label>
  	<label for="r3" id="btn3" class="p_bar"></label>
  	<label for="r4" id="btn4" class="p_bar"></label>
  	<label for="r5" id="btn5" class="p_bar"></label>
  	<label for="r6" id="btn6" class="p_bar"></label>
  	<label for="r7" id="btn7" class="p_bar"></label>
  	<label for="r8" id="btn8" class="p_bar"></label>
    <!-- 位置表示バー -->
    <div id="p_btn"></div>
  </div>
  <!-- ボタン部の高さ確保 -->
  <div style="padding-top:2%;"></div>

</div>
</div>
<?php }
wp_reset_postdata();
?>
<?php endif; ?>

 

'meta_key' => 'views',

'orderby' => 'meta_value_num',

については、次を参照。

 

CSSを追加する。

/* CSSスライダー*/
.carouselwrap {
  background-color: transparent;
  width: 100%;
  max-width: 1490px;
  border-radius: 22px;
  max-height: 296px;
}

.carouselwrap a {
  display: block;
  text-decoration: none;
  color: #444;
	    padding: 0;
	    margin-right: 1px;
}
div#top_carousel figure.eyecatch {
  max-width: 293px;
    max-height: 208px;
    position: relative;
}
.carouselwrap .entry-title {
    width: auto;
    font-size: .9em;
}

body{
	counter-reset: cssslider;
}
div#top_carousel figure.eyecatch::before {
    counter-increment: cssslider;
    content: counter(cssslider);
    background: #000000;
    margin-right: 3px;
    color: #fff;
    width: 1.5em;
    height: 1.5em;
    font-size: 0.55em;
    font-weight: 300;
    display: block;
    text-align: center;
    line-height: 1.5em;
    position: absolute;
    left: 0;
    top: 0;
    background: #006400;
    color: #ffffff;
    z-index: 1;
}
/* スライダー部(#leftcolomnのwidth;0;の時はwidth:100%;) */
#stage {
    position: relative;
    /* width: 90%; */
    background: #F8F2F2;
    overflow: hidden;
    border-radius: 10%;
    margin: 0 auto;
}
/* スライド群 */
#photos {
	position: absolute;
	width: 100%;
	left:0%;
	top:0px;
	transition:left 1s ease;
	animation:transtoright0 32s linear infinite;animation-delay:1s;
}
.pic {
	width:20%;
	position:absolute;
}
.pic img { width:94%; }
#photo1 { left:0%; }
#photo2 { left:20%; }
#photo3 { left:40%; }
#photo4 { left:60%; }
#photo5 { left:80%; }
#photo6 { left:100%; }
#photo7 { left:120%; }
#photo8 { left:140%; }
#photo9 { left:160%; }
#photo10 { left:180%; }
#photo11 { left:200%; }
#photo12 { left:220%; }
#photo13 { left:240%; }
/* スライドボタン・位置表示バー */
#btns { width:20%;margin:0 auto;position:relative; }
.p_bar { display:block;width:10%;height:8px;background:#aaa; }
.p_bar { position:absolute;top:8px; }
.p_bar:hover { cursor:pointer; }
#p_btn { display:block;width:10%;height:8px;background:#f00;z-index:20;position:absolute;top:8px; }

#btn1 { left:0%; }
#btn2 { left:12%; }
#btn3 { left:24%; }
#btn4 { left:36%; }
#btn5 { left:48%; }
#btn6 { left:60%; }
#btn7 { left:72%; }
#btn8 { left:84%; }
#p_btn { left:0%; transition:left 1s ease; animation:bar_position0 32s linear infinite;animation-delay:1s;pointer-events : none; }

#r1,#r2,#r3,#r4,#r5,#r6,#r7,#r8 { display:none; }

/* スライドボタンクリック時のスライド群のanimation設定 */
#r1:checked ~ #photos { left:1%;   animation:transtoright1 32s linear infinite;animation-delay:1s; }
#r2:checked ~ #photos { left:-19%; animation:transtoright2 32s linear infinite;animation-delay:1s; }
#r3:checked ~ #photos { left:-39%; animation:transtoright3 32s linear infinite;animation-delay:1s; }
#r4:checked ~ #photos { left:-59%; animation:transtoright4 32s linear infinite;animation-delay:1s; }
#r5:checked ~ #photos { left:-79%; animation:transtoright5 32s linear infinite;animation-delay:1s; }
#r6:checked ~ #photos { left:-99%; animation:transtoright6 32s linear infinite;animation-delay:1s; }
#r7:checked ~ #photos { left:-119%; animation:transtoright7 32s linear infinite;animation-delay:1s; }
#r8:checked ~ #photos { left:-139%; animation:transtoright8 32s linear infinite;animation-delay:1s; }
/* スライドボタンクリック時の位置表示バーのanimation設定 */
#r1:checked ~ #btns #p_btn { left:0%; animation-play-state:running; animation:bar_position1 32s linear infinite; animation-delay:1s; }
#r2:checked ~ #btns #p_btn { left:12%;animation:bar_position2 32s linear infinite; animation-delay:1s; animation-play-state:running;  }
#r3:checked ~ #btns #p_btn { left:24%; animation:bar_position3 32s linear infinite; animation-delay:1s; animation-play-state:running; }
#r4:checked ~ #btns #p_btn { left:36%; animation-play-state:running; animation:bar_position4 32s linear infinite; animation-delay:1s; }
#r5:checked ~ #btns #p_btn { left:48%; animation-play-state:running; animation:bar_position5 32s linear infinite; animation-delay:1s; }
#r6:checked ~ #btns #p_btn { left:60%; animation:bar_position6 32s linear infinite; animation-delay:1s; }
#r7:checked ~ #btns #p_btn { left:72%; animation:bar_position7 32s linear infinite; animation-delay:1s; }
#r8:checked ~ #btns #p_btn { left:84%; animation:bar_position8 32s linear infinite; animation-delay:1s; }
/* クリックされたスライドボタンの再クリック不能を示す */
#r1:checked ~ #btns #btn1,#r2:checked ~ #btns #btn2,#r3:checked ~ #btns #btn3,#r4:checked ~ #btns #btn4,#r5:checked ~ #btns #btn5,#r6:checked ~ #btns #btn6,#r7:checked ~ #btns #btn7,#r8:checked ~ #btns #btn8 { opacity:0.4; cursor:auto;}
/* スライド群のanimation */
@keyframes transtoright0 {
	0%    { left:1%; }
	10%   { left:1%; }
	12.5% { left:-19% }
	22.5% { left:-19% }
	25%   { left:-39% }
	35%   { left:-39% }
	37.5% { left:-59% }
	47.5% { left:-59% }
	50%   { left:-79% }
	60%   { left:-79% }
	62.5% { left:-99% }
	72.5% { left:-99% }
	75%   { left:-119% }
	85%   { left:-119% }
	87.5% { left:-139% }
	97.5% { left:-139% }
	99.9999% { left:-159% }
	100%  { left:1%; }
}
@keyframes transtoright1 {
	0%    { left:1%; }
	10%   { left:1%; }
	12.5% { left:-19% }
	22.5% { left:-19% }
	25%   { left:-39% }
	35%   { left:-39% }
	37.5% { left:-59% }
	47.5% { left:-59% }
	50%   { left:-79% }
	60%   { left:-79% }
	62.5% { left:-99% }
	72.5% { left:-99% }
	75%   { left:-119% }
	85%   { left:-119% }
	87.5% { left:-139% }
	97.5% { left:-139% }
	99.9999% { left:-159% }
	100%  { left:1%; }
}
@keyframes transtoright2 {
	0%    { left:-19%; }
	10%   { left:-19%; }
	12.5% { left:-39% }
	22.5% { left:-39% }
	25%   { left:-59% }
	35%   { left:-59% }
	37.5% { left:-79% }
	47.5% { left:-79% }
	50%   { left:-99% }
	60%   { left:-99% }
	62.5% { left:-119% }
	72.5% { left:-119% }
	75%   { left:-139% }
	85%   { left:-139% }
	87.4999% { left:-159% }
	87.5% { left:1% }
	97.5% { left:1% }
	100%  { left:-19%; }
}
@keyframes transtoright3 {
	0%    { left:-39%; }
	10%   { left:-39%; }
	12.5% { left:-59% }
	22.5% { left:-59% }
	25%   { left:-79% }
	35%   { left:-79% }
	37.5% { left:-99% }
	47.5% { left:-99% }
	50%   { left:-119% }
	60%   { left:-119% }
	62.5% { left:-139% }
	72.5% { left:-139% }
	74.9999% { left:-159% }
	75%   { left:1% }
	85%   { left:1% }
	87.5% { left:-19% }
	97.5% { left:-19% }
	100%  { left:-39%; }
}
@keyframes transtoright4 {
	0%    { left:-59%; }
	10%   { left:-59%; }
	12.5% { left:-79% }
	22.5% { left:-79% }
	25%   { left:-99% }
	35%   { left:-99% }
	37.5% { left:-119% }
	47.5% { left:-119% }
	50%   { left:-139% }
	60%   { left:-139% }
	62.4999% { left:-159% }
	62.5% { left:1% }
	72.5% { left:1% }
	75%   { left:-19% }
	85%   { left:-19% }
	87.5% { left:-39% }
	97.5% { left:-39% }
	100%  { left:-59%; }
}
@keyframes transtoright5 {
	0%    { left:-79%; }
	10%   { left:-79%; }
	12.5% { left:-99% }
	22.5% { left:-99% }
	25%   { left:-119% }
	35%   { left:-119% }
	37.5% { left:-139% }
	47.5% { left:-139% }
	49.9999% { left:-159% }
	50%   { left:1% }
	60%   { left:1% }
	62.5% { left:-19% }
	72.5% { left:-19% }
	75%   { left:-39% }
	85%   { left:-39% }
	87.5% { left:-59% }
	97.5% { left:-59% }
	100%  { left:-79%; }
}
@keyframes transtoright6 {
	0%    { left:-99%; }
	10%   { left:-99%; }
	12.5% { left:-119% }
	22.5% { left:-119% }
	25%   { left:-139% }
	35%   { left:-139% }
	37.4999% { left:-159% }
	37.5% { left:1% }
	47.5% { left:1% }
	50%   { left:-19% }
	60%   { left:-19% }
	62.5% { left:-39% }
	72.5% { left:-39% }
	75%   { left:-59% }
	85%   { left:-59% }
	87.5% { left:-79% }
	97.5% { left:-79% }
	100%  { left:-99%; }
}
@keyframes transtoright7 {
	0%    { left:-119%; }
	10%   { left:-119%; }
	12.5% { left:-139% }
	22.5% { left:-139% }
	24.9999% { left:-159% }
	25%   { left:1% }
	35%   { left:1% }
	37.5% { left:-19% }
	47.5% { left:-19% }
	50%   { left:-39% }
	60%   { left:-39% }
	62.5% { left:-59% }
	72.5% { left:-59% }
	75%   { left:-79% }
	85%   { left:-79% }
	87.5% { left:-99% }
	97.5% { left:-99% }
	100%  { left:-119%; }
}
@keyframes transtoright8 {
	0%    { left:-139%; }
	10%   { left:-139%; }
	12.4999% { left:-159% }
	12.5% { left:1% }
	22.5% { left:1% }
	25%   { left:-19% }
	35%   { left:-19% }
	37.5% { left:-39% }
	47.5% { left:-39% }
	50%   { left:-59% }
	60%   { left:-59% }
	62.5% { left:-79% }
	72.5% { left:-79% }
	75%   { left:-99% }
	85%   { left:-99% }
	87.5% { left:-119% }
	97.5% { left:-119% }
	100%  { left:-139%; }
}
/* 位置表示バーのanimation */
@keyframes bar_position0 {
	0% { left:0%; }
	10% { left:0% }
	12.5% { left:12%; }
	22.5% { left:12%; }
	25%   { left:24% }
	35%   { left:24% }
	37.5% { left:36% }
	47.5% { left:36% }
	50%   { left:48% }
	60%   { left:48% }
	62.5% { left:60% }
	72.5% { left:60% }
	75%   { left:72% }
	85%   { left:72% }
	87.5% { left:84% }
	97.5% { left:84% }
	100%  { left:0%; }
}
@keyframes bar_position1 {
	0% { left:0%; }
	10% { left:0% }
	12.5% { left:12%; }
	22.5% { left:12%; }
	25%   { left:24% }
	35%   { left:24% }
	37.5% { left:36% }
	47.5% { left:36% }
	50%   { left:48% }
	60%   { left:48% }
	62.5% { left:60% }
	72.5% { left:60% }
	75%   { left:72% }
	85%   { left:72% }
	87.5% { left:84% }
	97.5% { left:84% }
	100%  { left:0%; }
}
@keyframes bar_position2 {
	0% { left:12%; }
	10% { left:12% }
	12.5% { left:24%; }
	22.5% { left:24%; }
	25%   { left:36% }
	35%   { left:36% }
	37.5% { left:48% }
	47.5% { left:48% }
	50%   { left:60% }
	60%   { left:60% }
	62.5% { left:72% }
	72.5% { left:72% }
	75%   { left:84% }
	85%   { left:84% }
	87.5% { left:0% }
	97.5% { left:0% }
	100%  { left:12%; }
}
@keyframes bar_position3 {
	0% { left:24%; }
	10% { left:24% }
	12.5% { left:36%; }
	22.5% { left:36%; }
	25%   { left:48% }
	35%   { left:48% }
	37.5% { left:60% }
	47.5% { left:60% }
	50%   { left:72% }
	60%   { left:72% }
	62.5% { left:84% }
	72.5% { left:84% }
	75%   { left:0% }
	85%   { left:0% }
	87.5% { left:12% }
	97.5% { left:12% }
	100%  { left:24%; }
}
@keyframes bar_position4 {
	0% { left:36%; }
	10% { left:36% }
	12.5% { left:48%; }
	22.5% { left:48%; }
	25%   { left:60% }
	35%   { left:60% }
	37.5% { left:72% }
	47.5% { left:72% }
	50%   { left:84% }
	60%   { left:84% }
	62.5% { left:0% }
	72.5% { left:0% }
	75%   { left:12% }
	85%   { left:12% }
	87.5% { left:24 }
	97.5% { left:24 }
	100%  { left:36%; }
}
@keyframes bar_position5 {
	0% { left:48%; }
	10% { left:48% }
	12.5% { left:60%; }
	22.5% { left:60%; }
	25%   { left:72% }
	35%   { left:72% }
	37.5% { left:84% }
	47.5% { left:84% }
	50%   { left:0% }
	60%   { left:0% }
	62.5% { left:12% }
	72.5% { left:12% }
	75%   { left:24% }
	85%   { left:24% }
	87.5% { left:36% }
	97.5% { left:36% }
	100%  { left:48%; }
}
@keyframes bar_position6 {
	0% { left:60%; }
	10% { left:60% }
	12.5% { left:72%; }
	22.5% { left:72%; }
	25%   { left:84% }
	35%   { left:84% }
	37.5% { left:0% }
	47.5% { left:0% }
	50%   { left:12% }
	60%   { left:12% }
	62.5% { left:24% }
	72.5% { left:24% }
	75%   { left:36% }
	85%   { left:36% }
	87.5% { left:48% }
	97.5% { left:48% }
	100%  { left:60%; }
}
@keyframes bar_position7 {
	0% { left:72%; }
	10% { left:72% }
	12.5% { left:84%; }
	22.5% { left:84%; }
	25%   { left:0% }
	35%   { left:0% }
	37.5% { left:12% }
	47.5% { left:12% }
	50%   { left:24% }
	60%   { left:24% }
	62.5% { left:36% }
	72.5% { left:36% }
	75%   { left:48% }
	85%   { left:48% }
	87.5% { left:60% }
	97.5% { left:60% }
	100%  { left:72%; }
}
@keyframes bar_position8 {
	0% { left:84%; }
	10% { left:84% }
	12.5% { left:0%; }
	22.5% { left:0%; }
	25%   { left:12% }
	35%   { left:12% }
	37.5% { left:24% }
	47.5% { left:24% }
	50%   { left:36% }
	60%   { left:36% }
	62.5% { left:48% }
	72.5% { left:48% }
	75%   { left:60% }
	85%   { left:60% }
	87.5% { left:72% }
	97.5% { left:72% }
	100%  { left:84%; }
}

.padding-top {
    padding-top: 264px;
}

div#top_carousel {
    margin-bottom: 1em;
}
.carouselwrap .eyecatch img {
  border-radius: 8px;
  width: 100%;
    max-width: 293px;
    max-height: 208px;
}
@media only screen and (max-width: 767px) {
.carouselwrap .entry-title {
    width: auto;
    font-size: .7em;
    font-weight: 200;
}
.padding-top {
    padding-top: 23.5%;
}
.pic {
    width: 20%;
    position: absolute;
}
.carouselwrap .eyecatch img {
    max-width: 220px;
    max-height: 86px;
}
.post-list-card .post-list .description {
    font-size: .9em;
    line-height: 1.5em;
display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}
}
@media only screen and (max-width: 440px) {
.carouselwrap .eyecatch img {
    max-width: 220px;
    max-height: 86px;
}
	.carouselwrap .entry-title {
    width: auto;
    font-size: .6em;
    font-weight: 200;
}
	.padding-top {
    padding-top: 126px;
}
img.size-large {
    border-radius: 0;
}
.post-list-card .post-list .description {
    font-size: .9em;
    line-height: 1.5em;
display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
	}

/* スライダー終わり*/

 

スライダーに表示したい記事に pickup というタグをつける。

最大13記事まで。

 

以上でこのサイトのトップページのスライダーのように表示される。

 

参考:

 

  • またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。# kusanagi update cert C ...
  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語 ...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alt ...
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動い ...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではな ...
  • 目次 1 HTTPD アクセスログの日本語化 2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエン ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが ...
  • WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Go ...

タグクラウド

WordPress カテゴリ人気記事 Views most

WordPress カテゴリ人気記事 月間

20190724

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 38
20190724