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

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

×
  • 記事リスト間の余白
  • ページネーションのサイズ/カラー/余白
  • Prev,Nextボタンの位置/デザイン
  • カード型（1~4列）orリスト型の選択※1
  • SP時の表示枚数※2
  • スライドの自動or手動の選択※3


JS変更箇所

  • スライドの切り替わる速さ（デフォルトは0.3秒）
    変数名：speed02

 - ○
※4		 ◯
※留意事項  

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

  

▼類似パーツ

構造図を見る

カード型（3列）

手動でスライドver.

カード型（2列）

手動でスライドver.

カード型（1列）

手動でスライドver.

リスト型

手動でスライドver.

幅100%

構造図

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

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

設定方法

  • CSSをカスタムCSSに記述。
  • 編集画面用CSSをカスタムCSSに記述。
  • JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
  • パーツとクラス名をデモに合わせて設置する。​​​​
  1. 記事リストパーツにそれぞれ用途にあったクラス名を追加。
    カード型（1~3列）の場合、「swiper js-swiper02」を追加。
    リスト型の場合、「list_swiper js-swiper02」を追加。
    • 幅を100%化したい場合→セクションにクラス名「full_swiper_sec」を追加。
    • 必要に応じて、記事リストカスタム用のクラス名「caseContent_style」を追加。

  • 新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 () {
/* 1秒後に実行 */
setTimeout(function () {
/*------------- 変数定義 【変更可能】 START -------------*/
const speed02 = 300; /* スライド自体のスピード設定(ms / デフォルト→300) */
/*------------- 変数定義 【変更可能】 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}`, {
slidesPerView: 'auto', /* 一画面に表示する枚数 */
loop: true, /* ループさせる */
speed: speed02,/* スライド自体のスピード設定 */
/* ページネーション */
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-11-08更新（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: 35px;
padding: 20px;//シャドウが隠れる対策
@include breakpoint-sp {
margin-bottom: 55px;
}
@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;
}
}
}
}
}
}
// アローボタン
:is(.swiper-button-next, .swiper-button-prev) {
width: 70px;
height: 70px;
background: #ffad2f;
border-radius: 50vh;
opacity: $hover_opacity;
@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
) {
@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.