記事リストスライダー（自動スライドver.）

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

×
  • 記事リスト間の余白
  • ページネーションの
    サイズ/カラー/余白
  • Prev,Nextボタンの
    位置/デザイン
  • カード型（1~4列）orリスト型の選択※1
  • SP時の表示枚数※2
  • スライドの自動or手動の選択※3
  • [再生/停止]ボタンのデザイン
    • ボタンの枠組みの形
    • アイコンの色味・サイズ
    • 枠線の色
    • ボタンの位置
    • ボタンの有無

 

JS変更箇所

  • 各スライドの表示時間（デフォルトでは4秒）
    変数名：delay
  • スライドの切り替わる速さ（デフォルトでは0.3秒）
    変数名：speed 

 

  • [再生/停止]ボタンに
    使用するアイコンの変更※4
  • [再生/停止]ボタンパーツの使用時のテキスト表示
 ○※5 ◯
※留意事項  

※1：編集画面の機能から変更可能（後から変更不可）
※2：SP時はデフォルトで幅100%（1枚）表示になります。（CSSで変更可能）
※3：後から[自動or手動]の変更は不可（使用するJSコードが異なるため）
※4：現状使用しているアイコン（疑似要素）で固定となります。
※5：以下の類似パーツとの併用は不可とさせていただきます。

  

▼類似パーツ

構造図を見る

カード型（3列）

自動でスライドver.

再生・停止ボタン

カード型（2列）

自動でスライドver.

停止

カード型（1列）

自動でスライドver.

停止

リスト型

自動でスライドver.

停止

幅100%

再生・停止ボタン

構造図

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

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

設定方法

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

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

注意点

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

▼類似パーツ

JS・CSS・編集画面用CSS

  • jQuery
  • JS
  • 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

①の下に新規で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 delay = 4000; /* 自動再生にかかる秒数(ms) */
const speed = 300; /* スライド自体のスピード設定(ms / デフォルト→300) */
/*------------- 変数定義 【変更可能】 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, /* ループさせる */
slidesPerView: 'auto',/* 一画面に表示する枚数（自動・CSSでの幅設定に依存） */
speed: speed,/* スライド自体のスピード設定 */
/* 自動再生 */
autoplay: {
delay: delay,/* 自動再生にかかる秒数 */
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>

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;
}
}
}
}
// スワイパー（リスト型）
&.list_swiper {
overflow: hidden;
visibility: hidden; //ちらつき防止
height: 0; //記事リスト数分の高さが出るのを阻止
margin-bottom: 35px;
padding: 20px; //シャドウが隠れる対策
@include breakpoint-sp {
margin-bottom: 55px;
}
@include breakpoint-ssp {
padding: 20px 10px;
}
.article-list {
display: flex !important;
&.swiper-wrapper {
.entry-list-unit {
display: table !important;
height: initial;
margin: 0 20px 0 0;
}
}
}
}
}
// 再生・停止ボタン
&.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;
}
}
}
}
}
// 幅100%用（不要であれば削除）
&.full_swiper_sec {
.inner {
max-width: 100%;
padding: 0;
.row {
.col {
@include breakpoint-pc {
padding: 0 0 10px;
}
.component {
&.entry-list {
// スワイパー
&.swiper {
padding: 20px 0;
.article-list {
&.swiper-wrapper {
.entry-list-unit {
//記事リスト間余白なし
margin-right: 0 !important;
}
}
}
//カード型1列
&.entry-image-card-1-col {
.article-list {
.entry-list-unit {
width: 100%;
}
}
}
//カード型2列
&.entry-image-card-2-col {
.article-list {
.entry-list-unit {
@include breakpoint-pc {
width: calc(100% / 2);
}
}
}
}
//カード型3列
&.entry-image-card-3-col {
.article-list {
.entry-list-unit {
@include breakpoint-pc {
width: calc(100% / 3);
}
}
}
}
}
}
}
// 前へボタン
.swiper-button-prev {
left: 0;
}
// 次へボタン
.swiper-button-next {
right: 0;
}
}
}
}
}
}
}
/*----- 記事リストスライダー 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;
}
// スワイパー（リスト型）
&.list_swiper {
visibility: visible;
height: initial;
.article-list {
display: block !important;
}
}
}
}
}
}
}
&.full_swiper_sec {
.inner {
padding: 20px;
.row {
.col {
.component {
&.entry-list {
&.swiper {
.article-list {
gap: 0;
}
}
}
}
}
}
}
}
}
/*-- 記事リストスライダー 編集画面用 END --*/
JSパーツ集ロゴ

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

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

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

      © Basic Inc. All Rights Reserved.