画像+テキスト（row）のスライド

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

追加可能
パーツ		 変更可能箇所 変更NG 同一ページ
に複数設置		 ページ複製・
クリップボード
使用可否
  • 基本パーツ
    • 見出し
    • リッチテキスト
    • 画像
    • ボタン※1　etc...
  • 文字サイズ/カラー
  • カラム内の余白
  • ページネーションの
    サイズ/カラー/余白
  • Prev,Nextボタンの
    位置/デザイン
  • リンク設定の有無※2
  • スライド自動or手動の選択※3
  • 一画面で表示する枚数※4（1~5枚）
  • [再生/停止]ボタンデザイン
    • ボタンの枠組みの形
    • アイコンの色味・サイズ
    • 枠線の色
    • ボタンの位置
    • ボタンの有無


JS変更箇所

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

  • スライドの切り替わる速さ（デフォルトでは0.3秒）

    変数名：speed03
  • スライドの挙動
  • [再生/停止]ボタン使用するアイコンの変更※5
  • [再生/停止]ボタンパーツ使用時のテキスト表示
 〇
※6		 〇
※留意事項 

※1：ボタンを任意につける場合、ボックスリンク用ボタンと併用は不可。（ボタンだけにリンクがついている状態になります）
※2：各カード（カラム）はボックスリンクとなっています。（リンク設定無しに変更も可能）
※3：後から[自動or手動]の変更は不可。（使用するJSコードが異なるため）
※4：一画面に表示するカード（カラム）の表示枚数はCSSでコントロール可能。枚数制限はありませんが、5枚以上だとレスポンシブ時に表示崩れが起きやすくなる可能性があるため1~5枚を推奨。
また、記事リストではないので[カード1~4型・リスト型]等の選択（枚数を顧客側で自由に変更）はできません。
※5：現状使用しているアイコン（疑似要素）で固定となります。
※6：以下の類似パーツとの併用は不可とさせていただきます。

▼類似パーツ

構造図を見る

デモ01

自動でスライドver.

ダミー

記事タイトル01

テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01

記事タイトル01
ダミー

記事タイトル02

テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキテキスト02スト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキストテキスト0202テキスト02テキスト02

記事タイトル02
ダミー

記事タイトル03

テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキテキスト03テキスト03テキスト03スト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキストテキスト03テキスト03テキスト0303テキスト03

記事タイトル03
再生・停止ボタン

デモ02

自動でスライドver.

ダミー

記事タイトル01

テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01

記事タイトル01
ダミー

記事タイトル02

テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキテキスト02スト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキストテキスト0202テキスト02テキスト02

記事タイトル02
ダミー

記事タイトル03

テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキテキスト03テキスト03テキスト03スト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキストテキスト03テキスト03テキスト0303テキスト03

記事タイトル03
ダミー

記事タイトル04

テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキテキスト03テキスト03テキスト03スト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキストテキスト03テキスト03テキスト0303テキスト03

記事タイトル03
ダミー

記事タイトル05

テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキテキスト03テキスト03テキスト03スト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキストテキスト03テキスト03テキスト0303テキスト03

記事タイトル03
再生・停止ボタン

デモ03

手動でスライドver.

ダミー

記事タイトル01

テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01

記事タイトル01
ダミー

記事タイトル02

テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキテキスト02スト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキストテキスト0202テキスト02テキスト02

記事タイトル02
ダミー

記事タイトル03

テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキテキスト03テキスト03テキスト03スト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキストテキスト03テキスト03テキスト0303テキスト03

記事タイトル03

デモ04

手動でスライドver.

ダミー

記事タイトル01

テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01テキスト01

記事タイトル01
ダミー

記事タイトル02

テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキテキスト02スト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキスト02テキストテキスト0202テキスト02テキスト02

記事タイトル02
ダミー

記事タイトル03

テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキテキスト03テキスト03テキスト03スト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキストテキスト03テキスト03テキスト0303テキスト03

記事タイトル03
ダミー

記事タイトル04

テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキテキスト03テキスト03テキスト03スト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキストテキスト03テキスト03テキスト0303テキスト03

記事タイトル04
ダミー

記事タイトル05

テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキテキスト03テキスト03テキスト03スト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキスト03テキストテキスト03テキスト03テキスト0303テキスト03

記事タイトル04

構造図

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

画像+テキストのスライド構造図

設定方法

  • CSSをカスタムCSSに記述。
  • 編集画面用CSSをカスタムCSSに記述。
  • JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
  • パーツとクラス名をデモに合わせて設置する。
  1. 自動でスライドさせたい場合と手動でスライドさせたい場合でコピーするJavaScriptが異なります。
    それぞれ用途にあった方をコピーして下さい。    ​​​​
  2. 100%表示させたい場合、セクションにクラス名「swiper_full_sec」を追加。
  3. スワイプさせたい行（row）を1カラムで作成し、それぞれ用途にあったクラス名を追加。
    • 自動スライドver.の場合→クラス名「js-swiper_row swiper_row」
    • 手動スライドver.の場合→クラス名「js-swiper02_row swiper_row」
    • 3枚表示→上記にクラス名「op_card03」を追加。
    • 5枚表示→上記にクラス名「op_card05」を追加。
      ※デモ上では3・5枚表示のみ対応。表示枚数を変更したい場合、各自CSSで調整してください。
      →カスタムCSS内で【//表示枚数コントロール】で検索
  4. 新CMSの場合
    • デザインパーツ（ボックスリンク）を使用しても問題ありませんが、1カラムでないと作動しないため、
      ボックスリンク[3列（画像・見出し）]などを使用する場合、2カラム目と3カラム目を削除して1カラムになるように配置して下さい。
    • デザインパーツ（ボックスリンク）を使用した場合、ボタンパーツが設置されてる事を確認し、リンク先を[任意のURL]に設定。
  5. 旧CMSの場合
    • 必要に応じて、カラム（col）にボックスリンク用のクラス名「box_link_col」を追加。
    • ボックスリンクを設置したカラム（col）の中の一番下に、「ボタンパーツ」を設置し、
      クラス名「btn_custom_boxlink」を追加。リンク先を[任意のURL]に設定。
  6. 上記の行（row）を行ごと下に複製し、表示させたい順番に上から順に配置して下さい。
  7. [再生/停止]ボタンを用意します。
    最後に置いたスライダー用のカラム「js-swiper_row」のすぐ下に、新規rowを用意。（クラスは不要）
    中に[単体パーツ＞デフォルト＞ボタンパーツ]を配置し、クラス名「js-stop_btn stop_btn」を追加。
    リンク先を[このページの一番上に遷移]に設定する。※リンク先を設定しないと表示されません。
    ※古いページ内リンク対策が入ったJSパーツと併用している場合、上記のリンク設定[#]だと正しく動かない場合があります。その際はTOPページ等に設定してください。（URLが[#]以外になれば問題ありません）
    ※必ずデフォルトパーツを使用してください。デザインパーツを使用した場合、打ち消すスタイルが必要になります。
    ※ボタンテキストは表示されませんが、適当に「再生・停止ボタン」などと設定しておくと良いかと思います。

注意点

  • カラム「swiper_row」と「swiper_row」の間に他の行をいれないでください。

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

▼類似パーツ

カスタムCSS

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

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

CSSをコピーする
/*----- 画像+テキスト（row）のスライド START v1.0.0-----*/
.theme-fo-base .wrapper .contents {
:is(section, section[data-designpart-id]:not(:root:root:root:root)) {
// 幅100%にしたい場合
&.swiper_full_sec {
.inner {
max-width: 100%;
}
}
.inner {
.row {
//スワイパー
&.swiper_row {
height: initial;
visibility: hidden; //ちらつき防止
box-shadow: $box_shadow_common;
background: #fff;
.col {
padding: 0 20px;
.component {
&.image {
margin: 0 -20px;
}
}
}
}
//3枚表示
&.op_card03 {
max-width: calc((100% / 3) - 20px); //表示枚数コントロール
margin: 0 10px;
@include breakpoint-sp {
max-width: 100%;
}
}
//5枚表示
&.op_card05 {
max-width: calc((100% / 5) - 20px); //表示枚数コントロール
margin: 0 10px;
@include breakpoint-pro {
max-width: calc((100% / 3) - 20px);
}
@include breakpoint-sp {
max-width: 100%;
}
}
.col {
.component {
// 再生・停止ボタン
&.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"; //再生アイコン
}
}
}
}
}
}
}
}
.swiper-container {
position: relative;
border-bottom: 0.1px solid transparent; //親要素からはみ出してmarginが適用される対策
.swiper {
margin-bottom: 10px;
padding: 20px 0;
}
// アローボタン
: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;
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background: #ffad2f;
margin: 0 5px;
}
}
}
}
}
}
/*----- 画像+テキスト（row）のスライド END -----*/

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

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

CSSをコピーする
/*-- 画像+テキスト（row）のスライド 編集画面用 START v1.0.0--*/
:is(section,section[data-designpart-id]:not(:root:root:root:root:root:root)) {
.inner {
.row {
&.swiper_row {
visibility: visible;
width: calc(100% / 3);
min-width: 500px;
margin: 10px auto;
}
}
}
}
/*-- 画像+テキスト（row）のスライド 編集画面用 END --*/

①jQueryを設定

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

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

2024-01更新（v1.0.0）

JavaScriptをコピーする
<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埋め込みパーツを設置し、コピー＆ペーストします。

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

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

JavaScriptをコピーする
<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>
/* -----------------------------------------------------
画像+テキスト（row）のスライド ※自動スライドver. 停止ボタン付き v1.0.0
----------------------------------------------------- */
/* 画像等すべて読み込んでから実行 */
jQuery(window).on('load', function () {
/*------------- 変数定義 【変更可能】 START -------------*/
const delay03 = 4000; /* 自動再生にかかる秒数(ms) */
const speed03 = 300; /* スライド自体のスピード設定(ms / デフォルト→300) */
/*------------- 変数定義 【変更可能】 END -------------*/

const swiper_row = jQuery('.js-swiper_row');/* スライダー要素*/
const swiper_sec = jQuery('.js-swiper_row').closest('section, .main-visual');/* スライダーが入ったセクションorメンビジ*/

for (let i = 0; i < swiper_sec.length; i++) {
const index = i + 1;
const targetRow = swiper_sec.eq(i).find('.js-swiper_row');/* 各スライダー要素を取得 */
const targetRowSlideBtn = swiper_sec.eq(i).find('.js-stop_btn a');/* 各スライダー停止ボタンを取得 */
const swiperPaginationElement = 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>`);

targetRow.addClass('swiper-slide');
targetRow.wrapAll(`<div class='swiper-container'><div class='swiper swiper-${index}'><div class='swiper-wrapper'></div></div></div>`);
targetRowSlideBtn.addClass(`swiperBtn-${index}`);
swiperPaginationElement.insertAfter(`.swiper-${index}`);

const swiper = new Swiper(`.swiper-${index}`, {
slidesPerView: 'auto',/* 一画面に表示する枚数（自動・CSSでの幅設定に依存） */
loop: true,
centeredSlides: true,/* 中央寄せ */
speed: speed03,
/* 自動再生 */
autoplay: {
delay: delay03,/* 自動再生にかかる秒数 */
disableOnInteraction: false,/* ページネーションをクリック後に自動再生を再開 */
},
/* ページネーション */
pagination: {
el: `.swiper-pagination-${index}`,
clickable: true,
},
/* アローボタン */
navigation: {
nextEl: `.swiper-button-next-${index}`,
prevEl: `.swiper-button-prev-${index}`,
},
});

/* 再生・停止ボタン */
targetRowSlideBtn.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();
}
});
}

jQuery('.js-swiper_row').css('visibility', 'initial');/* ちらつき防止 */
jQuery('.js-swiper_row img').removeAttr('loading');/* 「loading="lazy"」対策 */
});
/* ---------------------------------------------------------
画像+テキスト（row）のスライド ※自動スライドver. 停止ボタン付き END
--------------------------------------------------------- */
</script>

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

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

2024-04-12更新

JavaScriptをコピーする
<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>
/* ------------------------------------------
画像+テキスト（row）のスライド ※手動スライドver.
------------------------------------------ */
/* 画像等すべて読み込んでから実行 */
jQuery(window).on('load', function () {
/*------------- 変数定義 【変更可能】 START -------------*/
const speed04 = 300; /* スライド切り替えのスピード設定(ms / デフォルト→300) */
/*------------- 変数定義 【変更可能】 END -------------*/

const swiper02_row = jQuery('.js-swiper02_row');
const swiper02_sec = jQuery('.js-swiper02_row').closest('section, .main-visual');

for (let i = 0; i < swiper02_sec.length; i++) {
const index = i + 1;
const targetRow02 = swiper02_sec.eq(i).find('.js-swiper02_row');
const swiperPaginationElement02 = 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>`);

targetRow02.addClass('swiper-slide');
targetRow02.wrapAll(`<div class='swiper-container'><div class='swiper swiper02-${index}'><div class='swiper-wrapper'></div></div></div>`);
swiperPaginationElement02.insertAfter(`.swiper02-${index}`);

const swiper02 = new Swiper(`.swiper02-${index}`, {
slidesPerView: 'auto',/* 一画面に表示する枚数（自動・CSSでの幅設定に依存） */
loop: true,
centeredSlides: true,/* 中央寄せ */
speed: speed04,/* スライド切り替え*/
/* ページネーション */
pagination: {
el: `.swiper02-pagination-${index}`,
clickable: true, /* クリック可にする */
},
/* アローボタン */
navigation: {
nextEl: `.swiper02-button-next-${index}`,
prevEl: `.swiper02-button-prev-${index}`,
},
});
}

jQuery('.js-swiper02_row').css('visibility', 'initial');/* ちらつき防止 */
jQuery('.js-swiper02_row img').removeAttr('loading');/* 「loading="lazy"」対策 */
});
/* ------------------------------------------
画像+テキスト（row）のスライド ※手動スライドver. END
------------------------------------------ */
</script>


JSパーツ集ロゴ

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

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

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

      © Basic Inc. All Rights Reserved.