Swiperで最新記事をフェード表示させる
LATEST POSTS
Swiperで画像だけではなくテキストもスライドできる。スライドではなくフェードにすると上品な感じがする。単純に画像の部分をテキストに置き換えただけ。ページネーションやナビも非表示。トップページに大きな写真をメインにしている場合、その下にニュースタイトルが数件フェードさせるといい感じ。ポイントはスライダーを使っていないように見せる。
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">ここにテキストタグを追加</div>
<div class="swiper-slide">ここにテキストタグを追加</div>
<div class="swiper-slide">ここにテキストタグを追加</div>
...
</div>
</div>今回は WordPress最新記事5件をSwiperを使ってフェード表示させた場合のサンプル。
表示させたいページの<body>〜</body>内にswiper-bundle.min.cssとswiper-bundle.min.jsをCDNか、もしくはダウンロードして格納先を指定する。
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script><body>〜</body>内の表示したい場所に以下のHTMLコードと設定スクリプトを並べて記述する。記事抜粋のthe_excerpt();については以下記事を参照。
<div class="container-swiper">
<div class="swiper-wrapper">
<?php
$args = array(
'posts_per_page' => 5,//スライド表示させる件数
'orderby' => 'post_date',//日付が新しい順
'order' => 'DESC',//降順 昇順はASC
'post_type' => 'post',//投稿タイプを取得 固定ページならpageとか
'post_status' => 'publish'//公開済の記事 下書きとかは除くということ
);
$the_view_query = new WP_Query( $args );
if ($the_view_query->have_posts()):
while($the_view_query->have_posts()): $the_view_query->the_post();
?>
<div class="swiper-slide">//記事の表示タグはお好みで
<h1 class="type-B">DATE <a href="<?php the_permalink(); ?>"><?php the_time('Y-n-j'); ?></a></h1>
<div class="postlist02-title"><i class="cl01 fas fa-chevron-right"></i> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<h1 class="categories02">CATEGORIES:<?php the_category(' '); ?> <?php the_tags('/ TAGS:', ' '); ?></h1></div>
<div class="postlist02-excerpt"><?php the_excerpt(); ?></div>//本文
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>以下オプションを設定する。autoHeight: をtrueにすると行数により自動で高さが変化してしまう。その下の表示も一緒に上下してしまい気持ち悪いので自動調整を未設定にするfalseにする。あとefectをfadeにしている。その他の設定はお好みで。
<script>
var mySwiper = new Swiper('.container-swiper', {
// スライドの間隔ー単位はpx
spaceBetween: 0,
// 表示されるスライドの枚数
slidesPerView: 1,
// スライドの高さに合わせてSwiperの高さを変える
autoHeight: false,
// ループする
loop: true,
// スライドスピード
speed: 1500,
// エフェクト
effect: 'fade',
/*自動で再生する*/
autoplay: {
// スライドが動く間隔。(これなら5秒)
delay: 5000,
// trueなら最後のスライドまで行ったら停止する。falseなら最初に戻る
stopOnLastSlide: false,
// trueなら触った後停止falseなら再生され続ける
disableOnInteraction: false,
// trueなら最後のスライドまで行ったら停止する。falseなら最初に戻る
reverseDirection: false
}
});</script>上記サンプル用のスタイルシート。記事内のスタイルは他ページのもので設定しているを流用しているので除外。スライドのみ別スタイルにするのであれば追加する。
.container-swiper {//このスライド自体の位置などの指定
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
margin-top: 10px;
position: relative;
overflow: hidden;
}
.swiper-slide {
background: #F2F2ED;//ページの背景色を指定してしないと背後記事の文字が重なる
}NOTICES
- 記事内容は実装させたものがほとんどですが自己責任で参考にしてください。