記事リストスライダー
（フェード）

※手動スライドverは以下より工数マイナス1hとなります

追加可能
パーツ		 変更可能箇所 変更NG 同一ページ
に複数設置		 ページ複製・
クリップボード
使用可否

×
  • ページネーションのサイズ/カラー/余白
  • Prev,Nextボタンの位置/デザイン
  • スライドの自動or手動の選択※1
  • [再生/停止]ボタンのデザイン
    • ボタンの枠組みの形
    • アイコンの色味・サイズ
    • 枠線の色
    • ボタンの位置
    • ボタンの有無


JS変更箇所

  • 各スライドの表示時間（デフォルトでは4秒）
    変数名：fadeDelay

  • スライドの切り替わる速さ（デフォルトでは2.5秒）
    変数名：fadeSpeed
  • 一画面で表示する枚数※2（1枚表示のみ）
  • [再生/停止]ボタンに使用する
    アイコンの変更※3
  • [再生/停止]ボタンパーツ使用時の
    テキスト表示
 ○
※4		 ○
※留意事項 

※1：後から[自動or手動]の変更は不可（使用するJSコードが異なるため）
※2：記事リストのカード型（1~4列）・リスト型の機能は使用できません。どれを選択しても一枚表示固定になります。
※3：現状使用しているアイコン（疑似要素）で固定となります。
※4：以下の類似パーツとの併用は不可とさせていただきます。

▼類似パーツ

構造図を見る

デモ01

自動でスライドver.

再生・停止ボタン

デモ02

手動でスライドver.

構造図

デモのパーツの構造を説明しています。

記事リストスライダー（カード型）構造図

設定方法

  • CSSをカスタムCSSに記述。
  • 編集画面用CSSをカスタムCSSに記述。
  • JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
  • パーツとクラス名をデモに合わせて設置する。
  1. 記事リストを自動でスライドさせたい場合と手動でスライドさせたい場合でコピーするJavaScriptが異なります。
    それぞれ用途にあった方をコピーして下さい。    ​​​​
  2. 記事リストパーツにそれぞれ用途にあったクラス名を追加。
    • 自動スライドver.の場合→クラス名「swiper op_fade js-swiper」
    • 手動スライドver.の場合→クラス名「swiper op_fade js-swiper02」
      ※必要に応じて、記事リストカスタム用のクラス名「caseContent_style」を追加。
      ※記事リストの型はどれを選択しても一枚表示固定になりますので、編集画面のスクロール量を抑えるため3型で設定しておくと良いかと思います。
  3. （自動スライドver.の場合）[再生/停止]ボタンを用意します。
    記事リストのすぐ下に、[単体パーツ＞デフォルト＞ボタンパーツ]を配置し、クラス名「js-stop_btn stop_btn」を追加。
    リンク先を[このページの一番上に遷移]に設定する。※リンク先を設定しないと表示されません。
    ※古いページ内リンク対策が入ったJSパーツと併用している場合、上記のリンク設定[#]だと正しく動かない場合があります。その際はTOPページ等に設定してください。（URLが[#]以外になれば問題ありません）
    ※必ずデフォルトパーツを使用してください。デザインパーツを使用した場合、打ち消すスタイルが必要になります。
    ※ボタンテキストは表示されませんが、適当に「再生・停止ボタン」などと設定しておくと良いかと思います。

  • 新CMSの場合：基本デザインパーツ（セクションパーツ、複合パーツ、単体パーツ）を使用して問題ありません。
    ※再生・停止ボタン以外

注意点

※以下の類似パーツとの併用はできません。

▼類似パーツ

JS・CSS・編集画面用CSS

  • jQuery
  • JS（自動ver）
  • JS（手動ver）
  • CSS
  • 編集画面用CSS

①jQueryを設定

JavaScript埋め込みパーツを設置し、CDNで読み込んだ最新バージョンのjQueryを反映させます。
※jQueryコンフリクト回避 のため

複数のJSパーツを使用する場合は、こちらの①jQueryの読み込みは一度だけで大丈夫です。

JSをコピーする

2024-01更新（v1.0.0）

<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script>
'use strict';
/*--- jQueryコンフリクト回避 v1.0.0---*/
jQuery.noConflict();

/*--- この下にJavaScriptを記述していく---*/
</script>

②JavaScript（自動ver）

①の下に新規でJavaScript埋め込みパーツを設置し、コピー＆ペーストします。

自動でスライドさせたい場合はこちらをコピー

JSをコピーする

2024-04-12更新（v1.0.0）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
/* -------------------------------------------------------
記事リストスライダー（フェード）※自動スライドver. 停止ボタン付き v1.0.0
------------------------------------------------------- */
/* 画像等すべて読み込んでから実行 */
jQuery(window).on('load', function () {
/* 0.5秒後に実行 */
setTimeout(function () {
/*------------- 変数定義 【変更可能】 START -------------*/
const fadeSpeed = 2500; /* スライド切り替えのスピード設定(ms) */
const fadeDelay = 4000; /* 自動再生にかかる秒数(ms) */
/*------------- 変数定義 【変更可能】 END -------------*/

const swiperList = jQuery('.js-swiper');/* スライダー */
swiperList.closest('.col').css('position', 'relative'); /* 前へ・次へボタンを内側に入れるために指定 */
const swiperRow = swiperList.closest('.row');/* スライダーが入ったrow */

for (let i = 0; i < swiperRow.length; i++) {
const index = i + 1;
const targetSlideSwiper = swiperRow.eq(i).find('.js-swiper');/* 各スライダー要素を取得 */
const targetSlide = swiperRow.eq(i).find('.js-swiper .entry-list-unit');/* 各スライダー内の記事リストを取得 */
const targetSlideBtn = swiperRow.eq(i).find('.js-stop_btn a');/* 各スライダー停止ボタンを取得 */
/* ページネーションとアローボタン */
const swiperPaginationEl = jQuery(
`<div class="swiper-pagination swiper-pagination-${index}"></div>` +
`<div class="swiper-button-prev swiper-button-prev-${index}"></div>` +
`<div class="swiper-button-next swiper-button-next-${index}"></div>`
);

/* 各スライダーのクラス名にindex付与（複数設置対応） */
const swiperWrapper = jQuery('.js-swiper .article-list');
swiperWrapper.addClass('swiper-wrapper');
targetSlide.addClass('swiper-slide');
targetSlideSwiper.addClass(`swiper-${index}`);
targetSlideBtn.addClass(`swiperBtn-${index}`);
swiperPaginationEl.insertAfter(`.swiper-${index}`);

const swiper = new Swiper(`.swiper-${index}`, {
loop: true, /* ループさせる */
speed: fadeSpeed,/* 切り替えスピード*/
effect: 'fade', /* フェードアニメーション */
fadeEffect: {
crossFade: true,/* 重なり対策 */
},
/* 自動再生 */
autoplay: {
delay: fadeDelay,/* 自動再生にかかる秒数 */
disableOnInteraction: false,/* ページネーションをクリック後に自動再生を再開 */
},
/* ページネーション */
pagination: {
el: `.swiper-pagination-${index}`,
clickable: true, /* クリック可にする */
},
/* アローボタン */
navigation: {
nextEl: `.swiper-button-next-${index}`,
prevEl: `.swiper-button-prev-${index}`
},
});

/* 再生・停止ボタン */
targetSlideBtn.on('click', function(e) {
e.preventDefault();
if (jQuery(this).hasClass('-stop')) {
jQuery(this)
.addClass('-start')
.removeClass('-stop');
swiper.autoplay.start();
} else {
jQuery(this)
.addClass('-stop')
.removeClass('-start');
swiper.autoplay.stop();
}
});

}

swiperList.css('visibility', 'initial');/* ちらつき防止 */
swiperList.css('height', 'initial');/* 記事リスト数分の高さが出るのを阻止 */

/* 記事リスト画像を取得（loading="lazy"外し） */
jQuery('.swiper-slide img').removeAttr('loading');
}, 500);

});
/* -------------------------------------------------------
記事リストスライダー（フェード）※自動スライドver. 停止ボタン付き END
------------------------------------------------------- */
</script>


②JavaScript（手動ver）

①の下に新規でJavaScript埋め込みパーツを設置し、コピー＆ペーストします。

手動でスライドさせたい場合はこちらをコピー

JSをコピーする

2024-04-12更新（v1.0.0）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
/* ---------------------------------------------
記事リストスライダー（フェード）※手動スライドver. v1.0.0
--------------------------------------------- */
/* 画像等すべて読み込んでから実行 */
jQuery(window).on('load', function () {
/* 1秒後に実行 */
setTimeout(function () {
/*------------- 変数定義 【変更可能】 START -------------*/
const fadeSpeed02 = 2500; /* スライド自体のスピード設定(ms) */
/*------------- 変数定義 【変更可能】 END -------------*/

const swiperList02 = jQuery('.js-swiper02');/* スワイパー */
swiperList02.closest('.col').css('position', 'relative'); /* アローアイコンを内側に入れるために指定 */
const swiperRow02 = swiperList02.closest('.row');/* スワイパーが入ったrow */

for (let i = 0; i < swiperRow02.length; i++) {
const index = i + 1;
const targetSlide02Swiper02 = swiperRow02.eq(i).find('.js-swiper02');/* 各スワイパー要素を取得 */
const targetSlide02 = swiperRow02.eq(i).find('.js-swiper02 .entry-list-unit');/* 各スワイパー内の記事リストを取得 */
/* ページネーションとアローボタン */
const swiperPaginationEl02 = jQuery(
`<div class="swiper-pagination swiper02-pagination-${index}"></div>` +
`<div class="swiper-button-prev swiper02-button-prev-${index}"></div>` +
`<div class="swiper-button-next swiper02-button-next-${index}"></div>`
);

/* 各スワイパーのクラス名にindex付与（複数設置対応） */
const swiperWrapper02 = jQuery('.js-swiper02 .article-list');
swiperWrapper02.addClass('swiper-wrapper');
targetSlide02.addClass('swiper-slide');
targetSlide02Swiper02.addClass(`swiper02-${index}`);
swiperPaginationEl02.insertAfter(`.swiper02-${index}`);

const swiper02 = new Swiper(`.swiper02-${index}`, {
loop: true, /* ループさせる */
speed: fadeSpeed02,/* 切り替えスピード*/
effect: 'fade', /* フェードアニメーション */
fadeEffect: {
crossFade: true,/* 重なり対策 */
},
/* ページネーション */
pagination: {
el: `.swiper02-pagination-${index}`,
clickable: true, /* クリック可にする */
},
/* アローボタン */
navigation: {
nextEl: `.swiper02-button-next-${index}`,
prevEl: `.swiper02-button-prev-${index}`
},
});
}

swiperList02.css('visibility', 'initial');/* ちらつき防止 */
swiperList02.css('height', 'initial');/* 記事リスト数分の高さが出るのを阻止 */

/* 記事リスト画像を取得（loading="lazy"外し） */
jQuery('.swiper-slide img').removeAttr('loading');
}, 500);

});
/* ---------------------------------------------
記事リストスライダー（フェード）※手動スライドver. END
--------------------------------------------- */
</script>

CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。

CSSをコピーする

2023-12-26更新（v1.0.0）

/*----- 記事リストスライダー（フェード） START v1.0.0-----*/
.theme-fo-base .wrapper .contents {
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
.inner {
.row {
.col {
.component {
&.entry-list {
// スワイパー
&.swiper {
visibility: hidden; //ちらつき防止
height: 0; //記事リスト数分の高さが出るのを阻止
margin-bottom: 10px;
padding: 20px; //シャドウが隠れる対策
@include breakpoint-ssp {
padding: 20px 10px;
}
.article-list {
&.swiper-wrapper {
flex-wrap: nowrap !important;
gap: 0;
.entry-list-unit {
height: initial;
margin-right: $case_list_space !important;
}
}
}
}
// フェード 透過対策
&.op_fade {
.article-list {
&.swiper-wrapper {
.swiper-slide {
opacity: 0 !important;
&.swiper-slide-active {
opacity: 1 !important;
}
}
}
}
}
}
// 再生・停止ボタン
&.stop_btn {
margin-top: 30px;
.button-cont {
a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
border-radius: 50vh;
background: transparent;
border: 2px solid #999;
font-size: 0; //テキスト非表示
letter-spacing: 0;
line-height: 1;
padding: 0;
position: relative;
&::before {
content: "\f04d"; //停止アイコン
font-family: $font_family_awsm5;
font-weight: 900;
font-size: 15px;
color: #999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// 停止時アイコン切り替え
&.-stop {
&::before {
content: "\f04b"; //再生アイコン
}
}
}
}
}
}
// アローボタン
:is(.swiper-button-next, .swiper-button-prev) {
width: 70px;
height: 70px;
background: #ffad2f;
border-radius: 50vh;
opacity: $hover_opacity;
transform: translateY(-50%);
@include breakpoint-ssp {
width: 50px;
height: 50px;
}
&:hover {
opacity: 1;
}
&::after {
font-size: 20px;
color: #fff;
}
}
// 前へボタン
.swiper-button-prev {
left: -20px;
@include breakpoint-ssp {
left: -15px;
}
}
// 次へボタン
.swiper-button-next {
right: -20px;
@include breakpoint-ssp {
right: -15px;
}
}
// ページネーション
:is(.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction) {
position: initial;
@include breakpoint-sp {
bottom: -20px;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background: #ffad2f;
margin: 0 5px;
}
}
}
}
}
}
}
/*----- 記事リストスライダー（フェード） END -----*/

編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。

CSSをコピーする

2024-09-12更新（v1.0.0）

/*-- 記事リストスライダー（フェード） 編集画面用 START v1.0.0--*/
:is(section,section[data-designpart-id]:not(:root:root:root:root:root:root)) {
.inner {
.row {
.col {
.component {
&.entry-list {
&.swiper {
visibility: visible;
height: initial;
}
}
}
}
}
}
}
/*-- 記事リストスライダー（フェード） 編集画面用 END --*/
JSパーツ集ロゴ

      JSが必要な実装の注意点スプレッドシート（H列）は読みましたか？

      ※必ず注意点（H列）をご確認の上閲覧ください

      はい
      いいえ
      ページトップへ戻る

      © Basic Inc. All Rights Reserved.