baserCMS 「バナー管理」プラグインをカルーセルスライダー「Splide」に利用してみる

baserCMS 「バナー管理」プラグインをカルーセルスライダー「Splide」に利用してみる
-2024/2/5 変更
スライダーにリンクがある場合、リンク領域が正しく設定できていなかったので、banner_topSlider_splide.phpファイルを一部修正しました。 それに伴って、splide_add.cssも一部修正しました。

baserCMS「バナー管理」プラグインをカルーセルスライダーに利用する場合、利用するカルーセルスライダーライブラリの仕様にある程度合わせたHTML出力用テンプレートファイルを作成することになります。 今回は、国産の軽量・高機能スライダー「Splide」 を例にテンプレートファイルを作成してみます。
株式会社BRISK（ブリスク）さんのブログ記事「Splideの使い方やオプションを解説！」 に掲載されている「メインビジュアル 01」 デモをサンプルにさせていただいて進めてみます。
また、カルーセルスライダーは、bc_sampleテーマに設置する前提で、css等は作成します。

なお、Splideライブラリは、公式のGitHubからDLしたライブラリ（splide.min.jsおよびsplide-core.min.css）をbaserCMSの利用するテーマ内（jsフォルダおよびcssフォルダ）に配置（インストール）するスタイルで進めます。その他の基本的な使い方などは、公式サイトおよび先の株式会社BRISKさんのブログなどを参考にしていただき、ここでは割愛します。

カルーセルスライダー「Splide」設置までの手順

さて、設置までの手順は以下。

  1. bannerプラグイン v.4.1.5（現時点の最新版）をインストールします。

  2. bannerプラグインの設定画面を開き、バナーエリア（ex. バナーエリア名：'mainSlider01'）を作成し、スライダーで使用する（バナー）画像を追加します。（前回記事を参考にしてください。）

  3. 使用するカルーセルスライダー用のレイアウトテンプレートファイル（ex. banner_topSlider_splide.php）を作成し、利用するテーマ内のElementsフォルダ（ex. theme/利用するテーマ/Elements/banner_topSlider_splide.php）に配置します。（詳細は、後述。）

  4. Splideに必要なライブラリおよび作成ファイル等（splide-core.min.css、splide_add.css、splide.min.js、splide_add.js）を利用するテーマ内のcssフォルダ、jsフォルダ内に配置します。（詳細は、後述。）

  5. レイアウトファイル（ex. theme/利用するテーマ/Layouts/default.php）上のBcBaser->mainImage()関数の記述をコメントアウトし、（スライダーを呼び出したい位置に）バナープラグインの関数を以下のように記述します。後に複数のスライダーを設置することも考慮して、<div class="mv01"></div>でラップしています。
    ex.

    <div class="mv01">
<?php $this->Banner->showBanner('mainSlider01', ['template' => 'banner_topSlider_splide']); ?>
</div>

  6. レイアウトファイルのhead内にSplideライブラリ等（必要なcssファイル、jsファイル）の読み込みを記述（追記）します。
    ex. 

    <?php if ($this->BcBaser->isHome()): ?>
<?php $this->BcBaser->css([
    'splide-core.min',
    'splide_add'
]) 
?>
<?php $this->BcBaser->js([
    'splide.min',
    'splide_add'
]) 
?>
<?php endif ?>

以上で、基本的には、カルーセルスライダー「Splide」が動作します（するはずw）。

HTML出力用テンプレートファイルの作成

では、そろそろ本題の「バナー管理」プラグインをカルーセルスライダーに利用するために作成するテンプレートファイルの具体的なコードです。
以下を基本設計として、banner_topSlider_splide.phpを作っていきたいと思います。

<div class="splide" aria-label="Splideの基本的なHTML">
  <div class="splide__pagination"></div>
  <div class="splide-wrapper">
    <div class="splide__track">
      <div class="splide__list">
        <div class="splide__slide">
          <div class="slide">Slide-01</div>
          <div class="slide-content">
            <h2 class="slide-title">Slide-01 title</h2>
            <div class="slide-description">Slide-01 description</div>
          </div>
        </div>
        <div class="splide__slide">
          <div class="slide">Slide-02</div>
          <div class="slide-content">
            <h2 class="slide-title">Slide-02 title</h2>
            <div class="slide-description">Slide-02 description</div>
          </div>
        </div>
        <div class="splide__slide">
          <div class="slide">Slide-03</div>
          <div class="slide-content">
            <h2 class="slide-title">Slide-03 title</h2>
            <div class="slide-description">Slide-03 description</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

細かいことはこの際置いておいて、この基本設計と後述するbanner_topSlider_splide.phpを見比べてもらえれば、特に説明はいらないかと思います。
slide-contentクラスは、「slide-title」と「slide-description」をレイアウトするためのボックス要素として用意したものなので、スライダーに重ねる文字要素が「slide-title」か「slide-description」のいずれか一方のみならば、特に必要ありません。その場合は、後述するsplide_add.cssのレイアウトの書き方も適宜修正してください。
さて、テンプレートファイルのbanner_topSlider_splide.phpのコードは、以下。

<?php
/**
 * [banner_topSlider_splide] 
 * バナープラグイン トップページスライダー - Splide用 テンプレートファイル
 * 
 * 呼び出し方法： Banner->showBanner('表示場所名', ['template' => 'banner_topSlider_splide'])
 * 
 */
?>

<?php if(!empty($bannerDatas)): ?>
    <div class="splide">
        <div class="splide__pagination"></div>
        <div class="splide-wrapper">
            <div class="splide__track">
                <div class="splide__list">
                    <?php foreach ($bannerDatas as $bannerData): ?>
                        <?php if($bannerData['BannerFile']['url']): ?>
                            <?php if($bannerData['BannerFile']['blank']): ?>
                                <a class="splide__slide" href="<?php echo $bannerData['BannerFile']['url'] ?>" target="_blank">
                            <?php else: ?>
                                <a class="splide__slide" href="<?php echo $bannerData['BannerFile']['url'] ?>">
                            <?php endif; ?>
                        <?php else: ?>
                            <div class="splide__slide">
                        <?php endif; ?>
                        <div class="slide">
                            <div class="slide-media img-cover">
                                <?php $this->BcBaser->element('Banner.banner_block_img', array('bannerData' => $bannerData)) ?>
                            </div>
                        </div>
                        <div class="slide-content">
                            <?php if ($bannerData['BannerFile']['alt']): ?>
                                <h2 class="slide-title"><?php echo $bannerData['BannerFile']['alt'] ?></h2>
                            <?php endif; ?>
                            <?php if ($this->Banner->getDescription($bannerData)): ?>
                                <div class="slide-description">
                                    <?php $this->Banner->showDescription($bannerData) ?>
                                </div>
                            <?php endif; ?>
                        </div>
                        <?php if($bannerData['BannerFile']['url']): ?>
                            </a>
                        <?php else: ?>
                            </div>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </div>
            </div>
        </div><!-- /splide-wrapper -->
    </div><!-- /splide -->
<?php else: ?>
    <p>画像がありません。</p>
<?php endif; ?>

cssのサンプル

最後にサンプルとしての追加のレイアウト調整およびアニメーション処理用のcss、Splideの初期化とオプション指定用のjsです。いずれのファイルもカルーセルスライダーをどんなふうに見せたいかで、随分中身は変わると思いますので、あくまでたたき台程度のサンプルとお考えください。
スライドイメージのズーム処理やスライド上に表示する文字のフェードインなどのアニメーションは、このcssで行っています。このようなcssアニメーションの組み合わせなども柔軟に実装しやすいのが、今回の「バナー管理」プラグインを利用したカルーセルスライダーのメリットだと思います。
以下、splide_add.cssのサンプルコードです。

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500&display=swap');

/* reset */
:root {
  --color-theme: #5fb131; /* ページネーションのアクティブ時に使用 */
  --color-theme-darken: #5fb131; /* ページネーションのアクティブ時に使用 */
  --color-text: #FFFFFF;
  --easing: cubic-bezier(0.2, 1, 0.2, 1);
  --transition: 0.8s var(--easing);
}

body {
  margin: 0;
}

:focus:not(:focus-visible) {
  outline: 0;
  /* キーボード操作以外はoutlineを消す */
}

/* slider */
.slide-media,
.thumb-media {
  position: relative;
  overflow: hidden;
}

.slide-media img,
.thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.splide {
  z-index: 0;
}

.splide-wrapper {
  position: relative;
}

.mv01 .l-inner {
  padding-bottom: 0;
}

.mv01 .splide-fade .splide__slide {
  pointer-events: none;
}

.mv01 .splide__track--fade .splide__slide.is-active {
  pointer-events: auto;
}

.mv01 .splide__pagination {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 30px;
  height: max-content;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mv01 .splide__pagination__page {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: var(--transition);
  background-color: rgba(255, 255, 255, 0.8); /*ページネーションの通常時に使用 */
  border: none;
}

.mv01 .splide__pagination>li:not(:first-child) {
  margin-top: 0.8rem;
}

.mv01 .splide__pagination__page.is-active {
  background-color: var(--color-theme);
}

.mv01 .slide-media {
  height:calc(100vh - 168px); /* 画面サイズ最大表示 */
  min-height: 400px;
}

@media only screen and (max-width: 768px) {
  .mv01 .slide-media {
    height:calc(100vh - 76px);
  }
}

.mv01 a.splide__slide[class*=-active]:hover {
  opacity: .9;
}

.mv01 .slide-content {
  position: absolute;
  bottom: 0;
  left: 70px;
  margin-right: calc(50Vw - 35px);
  margin-bottom: 70px;
}

.mv01 .slide-title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 30px;
  text-align: left;
  color: var(--color-text);
  text-shadow: 0 0px 5px rgba(0,0,0,0.2);
  font-family: 'Zen Maru Gothic', serif;
}

.mv01 .slide-description {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
  color: var(--color-text);
  text-shadow: 0 0px 5px rgba(0,0,0,0.2);
  font-family: 'Zen Maru Gothic', serif;
}

.mv01 .slide-media img {
  transition: 7s 1s ease-out;
  /* durationとdelayの合計時間をSplide側スクリプトのintervalオプション（スライド表示時間）と合わせる */
}

.mv01 .splide__slide[class*=-active] .slide-media img {
  transition-delay: 0s;
  transform: scale(1.1);
}

.mv01 .splide__slide[class*=-active] .slide-title {
  animation: mv01-fadeIn 2s 0.5s var(--easing) both;
}

.mv01 .splide__slide[class*=-active] .slide-description {
  animation: mv01-fadeIn 2s 1.5s var(--easing) both;
}

.mv01 .slide-description img {
  width: 100vw;
  height: 50vh;
  max-height: 350px;
}

@keyframes mv01-fadeIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
    filter: blur(300px);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@media only screen and (max-width: 768px) {
  .mv01 .slide-content {
    margin-right: 70px;
    margin-bottom: 70px;
  }
}

@media only screen and (max-width: 499px) {
  .mv01 .slide-title,
  .mv01 .slide-description {
    font-size: 1.5rem;
  }
}

Splideのオプションと初期化を行うためのsplide_add.jsは、以下。

document.addEventListener( 'DOMContentLoaded', function() {
  const target = '.mv01 .splide';
  const target_options = {
    type: 'fade',
    rewind: true,
    autoplay: true,
    arrows: false,
    pauseOnHover: false,
    interval: 8000, //スライド表示時間（ミリ秒）
    speed: 3000, //スライド移動時間（ミリ秒）
  }

  const mySplide = new Splide(target, target_options);
  mySplide.mount();
});

以上が、「バナー管理」プラグインを使ったカルーセルスライダー「Splide」の実装方法でした。こうやって一通り書いてみると何やら面倒そうですが、やってみると意外にそうでもありません。 カルーセルスライダーをもっといろいろやってみたいと思っておられる方は、是非一度チャレンジしてみてください。 少し走って書いてしまったので、気が向いたらもう少し行間を埋める程度に説明を付け加えたりするかもしれませんので、気になる方は、よかったら時々覗いてみてください。

コメント

コメントする


QdL4Xf

Related posts