スワイパー
普通のスワイパー
HTML
test01Swiper__itemの中を自由にカスタム。<br>クラス名はtest01を変える（置換使えば楽）
<div class="swiper test01Swiper">
<ul class="swiper-wrapper test01Swiper__list">
<li class="swiper-slide">
<div class="test01Swiper__item">
</div>
</li>
</ul>
</div><!-- swiper -->
<div class="paginationFlex paginationFlex-test01">
<div class="pagiBtn prevBtn"></div>
<div class="pagiDot"></div>
<div class="pagiBtn nextBtn"></div>
</div>
CSS
テンプレなのでページネーションのみ。
.paginationFlex {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-top: max(5%, 20px);
}
.pagiDot {
width: fit-content;
.swiper-pagination-bullet-active {
background-color: var(--pink01);
opacity: 1;
}
}
.pagiBtn {
position: relative;
width: 40px;
aspect-ratio: 1;
background-color: var(--pink01);
border-radius: var(--borderRadiusCircle);
cursor: pointer;
&::before,
&::after {
position: absolute;
content: "";
top: 50%;
left: 50%;
background-color: var(--white);
width: 30%;
height: 2px;
}
&::before {
transform-origin: bottom right;
transform: translate(-65%, -33%) rotate(45deg);
}
&::after {
transform-origin: top right;
transform: translate(-65%, -67%) rotate(-45deg);
}
}
.prevBtn {
transform: rotate(180deg);
}
JavaScript
new Swiper('.test01Swiper', {
slidesPerView: 1,
loop: true,
centeredSlides: true,
spaceBetween: 30,
autoplay: {
delay: 30000,
},
pagination: {
el: '.paginationFlex-test01 .pagiDot',
clickable: true,
},
navigation: {
nextEl: ".paginationFlex-test01 .nextBtn",
prevEl: ".paginationFlex-test01 .prevBtn",
},
breakpoints: {
481: {
slidesPerView: 2.6,
},
}
});
流れ続けるスワイパー
HTML
test02Swiper__itemの中を自由にカスタム。
<div class="swiper loopSwiper">
<ul class="swiper-wrapper loopSwiper__list">
<li class="swiper-slide">
<div class="loopSwiper__item">
</div>
</li>
</ul>
</div>
CSS
下記コードでスライドが止まることなく流れ続ける。
/******************************************
流れる続けるスライダー
*******************************************/
/*スライドの動き等速 */
.loopSwiper__list {
transition-timing-function: linear;
}
JavaScript
/******************************************
流れる続けるスライダー
*******************************************/
new Swiper('.loopSwiper', {
slidesPerView: 2,
allowTouchMove: false,
spaceBetween: 0,
loop: true,
speed: 10000,
autoplay: {
delay: 0,
},
breakpoints: {
// 画面幅が481ピクセル以上の場合
481: {
slidesPerView: 3,
},
}
});
流れ続けるスライダー+モーダル
HTML
<!-- スワイパー -->
<div class="swiper test05Swiper">
<ul class="swiper-wrapper test05Swiper__list">
<li class="swiper-slide">
<div class="test05Swiper__item" data-modal="1">
<span class="test-number">1</span>
</div>
</li>
<li class="swiper-slide">
<div class="test05Swiper__item" data-modal="2">
<span class="test-number">2</span>
</div>
</li>
<li class="swiper-slide">
<div class="test05Swiper__item" data-modal="3">
<span class="test-number">3</span>
</div>
</li>
<li class="swiper-slide">
<div class="test05Swiper__item" data-modal="4">
<span class="test-number">4</span>
</div>
</li>
<li class="swiper-slide">
<div class="test05Swiper__item" data-modal="5">
<span class="test-number">5</span>
</div>
</li>
<li class="swiper-slide">
<div class="test05Swiper__item" data-modal="6">
<span class="test-number">6</span>
</div>
</li>
</ul>
<div class="paginationFlex paginationFlex-test05">
<div class="prevBtn prevBtn-test05"></div>
<div class="pageDot pageDot-test05"></div>
<div class="nextBtn nextBtn-test05"></div>
</div>
</div><!-- swiper test05Swiper -->
<!-- モーダル -->
<div class="modal test05modalWindow">
<div class="overlay">
<div class="test05modalWindow__cont">
<div class="test05modalWindow__item" data-modal="1">
<span class="test-number">1</span>
</div>
<div class="test05modalWindow__item" data-modal="2">
<span class="test-number">2</span>
</div>
<div class="test05modalWindow__item" data-modal="3">
<span class="test-number">3</span>
</div>
<div class="test05modalWindow__item" data-modal="4">
<span class="test-number">4</span>
</div>
<div class="test05modalWindow__item" data-modal="5">
<span class="test-number">5</span>
</div>
<div class="test05modalWindow__item" data-modal="6">
<span class="test-number">6</span>
</div>
<div class="modalBtn-close">
<span></span>
</div>
<div class="modalBtn-prev">
<span></span>
</div>
<div class="modalBtn-next">
<span></span>
</div>
</div>
</div><!-- overlay" -->
</div><!-- modal test05modalWindow -->
CSS
/*******************************************
流れるスライダーとモーダル
*******************************************/
/* 〜〜〜〜テンプレ用〜〜〜〜〜〜〜〜〜〜〜〜 */
.test05Swiper__item {
background-color: var(--purple);
cursor: pointer;
}
.test05modalWindow__item {
background-color: var(--purple);
}
/* 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
.overlay {
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.test05Swiper__list {
transition-timing-function: linear;
}
.paginationFlex-test05 {
display: none;
}
/* jsでクラス付与 */
.-noscroll {
overflow: hidden;
}
/* -------スワイパー ------ */
.test05modalSwiper {
padding: 50px;
}
.test05modalSwiper .paginationFlex {
display: none;
}
/* -------モーダル------ */
.test05modalWindow,
.test05modalWindow__item {
display: none;
}
.test05modalWindow.-active,
.test05modalWindow__item.-active {
display: block;
}
.test05modalWindow {
position: fixed;
width: 100%;
height: 100vh;
height: 100dvh;
top: 0;
left: 0;
z-index: 99;
overflow: scroll;
}
.test05modalWindow__cont {
position: relative;
max-width: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.test05modalWindow__item {
height: 80vh;
}
/* -------モーダル内ページネーション ------ */
.modalBtn-close,
.modalBtn-prev,
.modalBtn-next {
position: absolute;
}
.modalBtn-close {
width: 55px;
height: 55px;
top: 0;
right: 0;
background-color: var(--gray);
cursor: pointer;
transition: var(--transitionBase);
&:hover {
background-color: var(--black);
}
}
.modalBtn-close span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.modalBtn-close span::before,
.modalBtn-close span::after {
position: absolute;
content: "";
width: 80%;
height: 3px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
background-color: var(--black);
transition: var(--transitionBase);
}
.modalBtn-close span::after {
transform: translate(-50%, -50%) rotate(45deg);
}
.modalBtn-close:hover span::before,
.modalBtn-close:hover span::after {
background-color: var(--gray);
/* ホバー時の背景色 */
}
.modalBtn-prev,
.modalBtn-next {
width: 55px;
height: 55px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
background-color: var(--gray);
border-radius: var(--borderRadius50);
}
.modalBtn-prev {
right: 103%;
}
.modalBtn-next {
left: 103%;
}
.modalBtn-prev span,
.modalBtn-next span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.modalBtn-prev span::before,
.modalBtn-next span::before {
position: absolute;
content: "";
width: 18.5px;
/* beforeの/3 */
height: calc(27.5px / 2 * tan(60deg));
/* pxはbeforeの/2 */
clip-path: polygon(0 0, 100% 50%, 0 100%);
left:50%;
/* pxはbeforeの/2 - 1 */
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--black);
z-index: 10;
}
.modalBtn-prev span::before {
transform: translate(-50%, -50%) scale(-1);
}
@media screen and (max-width:768px) {
.paginationFlex-test05 {
display: flex;
}
.test05Swiper {
padding-bottom: 10%;
}
}
@media screen and (max-width:480px) {
.test05modalSwiper .paginationFlex {
display: flex;
}
}
JavaScript
コードの説明
/******************************************
流れ続けるスライダー(スワイパー)+モーダル
*******************************************/
// -----------------------------
// スワイパー の設定
// -----------------------------
var test05Swiper = new Swiper('.test05Swiper', {
slidesPerView: '1', // 一度に表示するスライド数
allowTouchMove: true,
spaceBetween: 30, // スライド間のスペース
loop: true, // ループするかどうか
speed: 500,
centeredSlides: true, // スライドのスピード（ミリ秒）
autoplay: {
delay: 5000, // 自動再生の遅延時間（ミリ秒）
},
pagination: { //ページネーション（ドット）
el: '.pageDot-test05',
clickable: true,
},
navigation: { //ナビゲーション（矢印）
nextEl: ".nextBtn-test05",
prevEl: ".prevBtn-test05",
},
breakpoints: {
481: {
slidesPerView: 3,
},
769: {
slidesPerView: 4,
autoplay: {
delay: 0, // 自動再生の遅延時間（ミリ秒）
},
speed: 10000, // スライドのスピード（ミリ秒）
}
}
});
// -----------------------------
// モーダルの設定
// -----------------------------
let currentNumber = ''; // 現在表示されているモーダルコンテンツの番号
let btnType = ''; // ボタンの種類（次へ、前へ）
let maxLength = $('.test05modalWindow__item').length; // モーダル内のコンテンツの最大数
// スワイパースライドをクリックしたときの処理
$(document).on('click', '.test05Swiper__item', function () {
$('body').addClass('-noscroll'); // スクロールを無効にする
let dataModal = $(this).attr('data-modal'); // クリックされたスライドのdata-modal属性を取得
$('.test05modalWindow').addClass('-active');
$('.overlay').scrollTop(0); // モーダルの表示位置をトップに戻す
$('.test05modalWindow__item').filter('[data-modal = "' + dataModal + '"]').addClass('-active');
});
// モーダルのクローズボタンをクリックしたときの処理
$(document).on('click', '.modalBtn-close', function () {
$('body').removeClass('-noscroll'); // スクロールを再度有効にする
$('.test05modalWindow').removeClass('-active');
$('.test05modalWindow__item').removeClass('-active');
});
// モーダル外をクリックしたときの処理（モーダルを閉じる）
$(document).on('click', function (event) {
var target = $(event.target);
if (target.hasClass('overlay')) {
target.parents('.test05modalWindow').removeClass('-active');
$('.test05modalWindow__item').removeClass('-active');
$('body').removeClass('-noscroll');
}
});
// 「前へ」ボタンをクリックしたときの処理
$(document).on('click', '.modalBtn-prev', function () {
currentNumber = $('.test05modalWindow__item.-active').attr('data-modal');
btnType = 'prev';
operationBtn(btnType, currentNumber);
});
// 「次へ」ボタンをクリックしたときの処理
$(document).on('click', '.modalBtn-next', function () {
currentNumber = $('.test05modalWindow__item.-active').attr('data-modal');
btnType = 'next';
operationBtn(btnType, currentNumber);
});
// 「前へ」や「次へ」ボタンがクリックされたときの動作を定義する関数
function operationBtn(type, num) {
num = Number(num); // 現在の番号を数値型に変換
if (type === 'prev') {
// 「前へ」ボタンがクリックされた場合の処理
if (num !== 1) {
num -= 1; // 番号を1つ減らす
$('.test05modalWindow__item').removeClass('-active');
$('.test05modalWindow__item').filter('[data-modal = "' + num + '"]').addClass('-active');
} else {
// 番号が1の場合、最後のコンテンツを表示
$('.test05modalWindow__item').removeClass('-active');
$('.test05modalWindow__item').filter('[data-modal = "' + maxLength + '"]').addClass('-active');
}
} else if (type === 'next') {
// 「次へ」ボタンがクリックされた場合の処理
if (num !== maxLength) {
num += 1; // 番号を1つ増やす
$('.test05modalWindow__item').removeClass('-active');
$('.test05modalWindow__item').filter('[data-modal = "' + num + '"]').addClass('-active');
} else {
// 番号が最大数の場合、最初のコンテンツを表示
$('.test05modalWindow__item').removeClass('-active');
$('.test05modalWindow__item').filter('[data-modal = "' + 1 + '"]').addClass('-active');
}
}
}
タブ切り替え
HTML
test03Swiper-tab__item,test03Swiper-cont__itemの中をカスタマイズ
<!-- タブボタン -->
<div class="test03Swiper">
<div class="swiper test03Swiper-tab">
<ul class="swiper-wrapper test03Swiper-tab__list">
<li class="swiper-slide">
<div class="test03Swiper-tab__item">
</div>
</li>
</ul>
</div><!-- swiper test03Swiper-tab -->
<!-- タブコンテナ -->
<div class="swiper test03Swiper-cont">
<ul class="swiper-wrapper test03Swiper-cont__list">
<li class="swiper-slide">
<div class="test03Swiper-cont__item">
</div>
</li>
</ul>
</div><!-- swiper test03Swiper-cont -->
</div><!-- test03Swiper -->
CSS
/******************************************
タブ切り替え
*******************************************/
.test03Swiper-tab {
margin-bottom: 50px;
}
.test03Swiper-tab__item {
cursor: pointer;
transition: var(--transitionBase);
}
.test03Swiper-tab__item:hover,
.swiper-slide-thumb-active .test03Swiper-tab__item {
background-color: var(--lightpink);
}
@media screen and (max-width:768px) {
.test03Swiper-tab__list {
flex-wrap: wrap;
justify-content: space-between;
}
.test03Swiper-tab__list .swiper-slide {
width:calc((100% - 15px)/2) !important ;
&:nth-child(n + 3) {
margin-top: 15px;
}
}
}
JavaScript
// タブ
var tabSwiper = new Swiper('.test03Swiper-tab', {
slidesPerView: 2,
spaceBetween: 0,
breakpoints: {
// 画面幅が769ピクセル以上の場合
769: {
slidesPerView: 4,
spaceBetween: 15,
}
}
});
// タブコンテンツ
var contSwiper = new Swiper('.test03Swiper-cont', {
effect: 'fade',
fadeEffect: {
crossFade: true,
},
slidesPerView: 1,
autoHeight: true,
loop: true,
spaceBetween: 50,
// タブと連動
thumbs: {
swiper: tabSwiper
}
});
タブ切り替え+sp時アコーディオン
-
test04-01
aco1test04-テキスト01
-
test04-02
aco2test04-テキスト02
-
test04-03
aco3test04-テキスト03
-
test04-04
aco4test04-テキスト04
-
test04-05
aco5test04-テキスト05
HTML
<div class="test04Swiper">
<!-- ↓↓↓↓↓↓↓↓↓↓スワイパー タブ↓↓↓↓↓↓↓↓↓↓ -->
<div class="swiper test04Swiper-tab">
<ul class="swiper-wrapper test04Swiper-tab__list">
<li class="swiper-slide">
<div class="test04Swiper-tab__item">
<span class="test04Swiper-tab__txt">
test04-01
</span>
</div>
</li>
<li class="swiper-slide">
<div class="test04Swiper-tab__item">
<span class="test04Swiper-tab__txt">
test04-02
</span>
</div>
</li>
<li class="swiper-slide">
<div class="test04Swiper-tab__item">
<span class="test04Swiper-tab__txt">
test04-03
</span>
</div>
</li>
<li class="swiper-slide">
<div class="test04Swiper-tab__item">
<span class="test04Swiper-tab__txt">
test04-04
</span>
</div>
</li>
<li class="swiper-slide">
<div class="test04Swiper-tab__item">
<span class="test04Swiper-tab__txt">
test04-05a
</span>
</div>
</li>
</ul>
</div>
<!-- ↑↑↑↑↑↑↑↑↑↑スワイパー タブ↑↑↑↑↑↑↑↑↑ -->
<!-- ↓↓↓↓↓↓↓↓↓↓スワイパー コンテナ↓↓↓↓↓↓↓↓↓↓ -->
<div class="test04Cont">
<div class="swiper test04Swiper-cont">
<ul class="swiper-wrapper test04Swiper-cont__list">
<li class="swiper-slide">
<div class="test04Swiper-cont__item">
<h3 class="test04Swiper-cont__ttl">
test04-01
</h3>
<span class="test-number">1</span>
<p class="test04Swiper-cont__txt">
test04-テキスト01
</p>
</div>
</li>
<li class="swiper-slide">
<div class="test04Swiper-cont__item">
<h3 class="test04Swiper-cont__ttl">
test04-02
</h3>
<span class="test-number">2</span>
<p class="test04Swiper-cont__txt">
test04-テキスト02
</p>
</div>
</li>
<li class="swiper-slide">
<div class="test04Swiper-cont__item">
<h3 class="test04Swiper-cont__ttl">
test04-03
</h3>
<span class="test-number">3</span>
<p class="test04Swiper-cont__txt">
test04-テキスト03
</p>
</div>
</li>
<li class="swiper-slide">
<div class="test04Swiper-cont__item">
<h3 class="test04Swiper-cont__ttl">
test04-04
</h3>
<span class="test-number">4</span>
<p class="test04Swiper-cont__txt">
test04-テキスト04
</p>
</div>
</li>
<li class="swiper-slide">
<div class="test04Swiper-cont__item">
<h3 class="test04Swiper-cont__ttl">
test04-05
</h3>
<span class="test-number">5</span>
<p class="test04Swiper-cont__txt">
test04-テキスト05
</p>
</div>
</li>
</ul>
</div>
<!-- ↑↑↑↑↑↑↑↑↑↑スワイパー コンテナ↑↑↑↑↑↑↑↑↑ -->
<div class="test04Prev">
<span class="test04Prev__btn"></span>
</div>
<div class="test04Next">
<span class="test04Next__btn"></span>
</div>
</div><!-- test04Cont -->
</div><!-- test04Swiper -->
<!-- ↓↓↓↓↓↓↓↓↓↓アコーディオン↓↓↓↓↓↓↓↓↓↓ -->
<div class="accordion">
<ul class="accordion__list">
<li class="accordion__item">
<h3 class="accordion__ttl">
test04-01
</h3>
<div class="accordion__detail">
<div class="accordion__img">
<span class="test-number">aco1</span>
</div>
<p class="accordion__txt">
test04-テキスト01
</p>
</div>
</li>
<li class="accordion__item">
<h3 class="accordion__ttl">
test04-02
</h3>
<div class="accordion__detail">
<div class="accordion__img">
<span class="test-number">aco2</span>
</div>
<p class="accordion__txt">
test04-テキスト02
</p>
</div>
</li>
<li class="accordion__item">
<h3 class="accordion__ttl">
test04-03
</h3>
<div class="accordion__detail">
<div class="accordion__img">
<span class="test-number">aco3</span>
</div>
<p class="accordion__txt">
test04-テキスト03
</p>
</div>
</li>
<li class="accordion__item">
<h3 class="accordion__ttl">
test04-04
</h3>
<div class="accordion__detail">
<div class="accordion__img">
<span class="test-number">aco4</span>
</div>
<p class="accordion__txt">
test04-テキスト04
</p>
</div>
</li>
<li class="accordion__item">
<h3 class="accordion__ttl">
test04-05
</h3>
<div class="accordion__detail">
<div class="accordion__img">
<span class="test-number">aco5</span>
</div>
<p class="accordion__txt">
test04-テキスト05
</p>
</div>
</li>
</ul>
</div><!-- accordion -->
<!-- ↑↑↑↑↑↑↑↑↑↑アコーディオン↑↑↑↑↑↑↑↑↑ -->
CSS
/******************************************
タブ切り替え+spの時はアコーディオン
*******************************************/
/* 〜〜〜〜テンプレ用〜〜〜〜〜〜〜〜〜〜〜〜 */
.test04Swiper-cont__item span {
width: 100%;
height: 200px;
background-color: var(--yellow);
}
.test04Swiper-tab__item {
width: 100%;
height: 100%;
background-color: var(--yellow);
}
.accordion__img {
width: min(100%, 300px);
height: max(20vw, 100px);
margin: 0 auto;
background-color: var(--yellow);
}
/* 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 */
/* タブ */
.test04Swiper {
display: flex;
justify-content: space-between;
}
.test04Swiper-tab {
max-width: 420px;
width: 100%;
margin: 0;
}
.test04Swiper-tab__list {
flex-wrap: wrap;
justify-content: space-between;
}
.test04Swiper-tab__list .swiper-slide {
margin-bottom: 20px;
width: calc((100% - 20px)/2) !important;
}
.test04Swiper-tab__list .swiper-slide:last-child {
margin-bottom: 0;
}
.test04Swiper-tab__item {
position: relative;
cursor: pointer;
}
.test04Swiper-tab__item {
overflow: hidden;
border-radius: var(--borderRadius25);
}
.test04Swiper-tab__item img {
display: block;
}
.test04Swiper-tab__item::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: var(--transitionBase);
/* 黒のフィルター */
/* background-color: rgba(0, 0, 0, 0.3); */
}
.test04Swiper-tab__item:hover:after,
.swiper-slide-thumb-active .test04Swiper-tab__item:after {
background-color: rgba(255, 255, 255, 0.3);
/* ホバー時に半透明の白を表示 */
}
.test04Swiper-tab__item:hover .test04Swiper-tab__txt,
.swiper-slide-thumb-active .test04Swiper-tab__txt {
color: var(--black);
}
.test04Swiper-tab__txt {
position: absolute;
left: 50%;
bottom: 15px;
width: 100%;
transform: translateX(-50%);
text-align: center;
font-size: var(--size21);
color: var(--white);
line-height: var(--lineHight133);
transition: var(--transitionBase);
z-index: 1;
}
/* コンテナ */
.test04Cont {
padding: 5.5% 5%;
position: relative;
max-width: 505px;
max-height: 637px;
border: 2px solid var(--yellow);
background-color: var(--white);
border-radius: var(--borderRadius25);
}
.test04Swiper-cont__ttl {
margin-bottom: max(13.7%, 20px);
text-align: center;
font-size: var(--size32);
font-weight: var(--weight700);
}
.test04Swiper-cont__item img {
border-radius: var(--borderRadius25);
}
.test04Swiper-cont__txt {
margin-top: 35px;
line-height: var(--lineHight155);
}
/* ページネーション */
.test04Prev,
.test04Next {
position: absolute;
top: 50%;
z-index: 50;
transition: var(--transitionBase);
}
.test04Prev {
left: 0;
transform: translate(-50%, -50%);
}
.test04Prev:hover {
transform: translate(-70%, -50%);
}
.test04Next {
right: 0;
transform: translate(50%, -50%) scale(-1);
}
.test04Next:hover {
transform: translate(70%, -50%) scale(-1);
}
.test04Prev__btn,
.test04Next__btn {
display: inline-block;
position: relative;
width: 60px;
height: 60px;
cursor: pointer;
border-radius: var(--borderRadius50);
background-color: var(--yellow);
}
.test04Prev__btn::before,
.test04Next__btn::before,
.test04Prev__btn::after,
.test04Next__btn::after {
position: absolute;
content: "";
width: 15px;
height: 3px;
left: 55%;
top: 50%;
background-color: var(--white);
}
.test04Prev__btn::before,
.test04Next__btn::before {
transform: translate(-50%, -50%) rotate(45deg);
transform-origin: top left;
}
.test04Prev__btn::after,
.test04Next__btn::after {
transform: translate(-50%, -50%) rotate(-45deg);
transform-origin: bottom left;
}
@media screen and (max-width:1050px) {
.test04Cont {
margin-left: 20px;
width: 49vw;
}
}
@media screen and (max-width:1024px) {
.test04Cont {
margin-left: 7%;
}
}
@media screen and (max-width:768px) {
.test04Swiper {
display: none;
}
}
/* ーーーーーーーーーーーーーーー
(accordion)
ーーーーーーーーーーーーーーー */
.accordion {
display: none;
}
@media screen and (max-width:768px) {
.accordion {
display: block;
max-width: 600px;
margin: 50px auto 0;
}
.accordion__item {
margin-bottom: 20px;
cursor: pointer;
padding: 30px 0;
border: 2px solid var(--yellow);
border-radius: var(--borderRadius10);
background-color: var(--lightyellow);
transition: var(--transitionBase);
}
.accordion__item:hover,
.accordion__item.open {
background-color: var(--white);
}
.accordion__ttl {
font-size: 2.1rem;
text-align: center;
position: relative;
font-weight: var(--weight700);
}
.accordion__ttl::before,
.accordion__ttl::after {
position: absolute;
content: "";
width: 15px;
height: 2px;
top: 50%;
right: 5%;
transform: translateY(-50%);
background-color: var(--yellow);
transition: .6s;
}
.accordion__ttl::after {
transform: translateY(-50%) rotate(90deg);
}
.open .accordion__ttl::before {
transform: translateY(-50%) rotate(180deg);
}
.open .accordion__ttl::after {
transform: translateY(-50%) rotate(360deg);
}
.accordion__detail {
display: none;
padding: 0 max(8.4%, 15px);
}
.accordion__img {
max-width: 600px;
width: 100%;
margin: 30px 0 0 0;
}
.accordion__txt {
font-size: 1.9rem;
margin-top: 30px;
line-height: var(--lineHight155);
}
}
@media screen and (max-width:480px) {
.accordion__item {
padding: 20px 0;
}
.accordion__ttl {
font-size: 1.7rem;
}
.accordion__txt {
font-size: 1.5rem;
}
}
JavaScript
コードの説明
/******************************************
タブ切り替え spでアコーディオン（スワイパー）
*******************************************/
// タブ
var tabSwiperAco = new Swiper('.test04Swiper-tab', {
allowSlideNext: false, // 次のスライドへの移動を無効化
allowSlidePrev: false, // 前のスライドへの移動を無効化
breakpoints: {
950: {
// spaceBetween: 35, // 画面幅が950ピクセル以上の場合の設定
}
}
});
// タブコンテンツ
var contSwiperAco = new Swiper('.test04Swiper-cont', {
slidesPerView: 1,
loop: true,
spaceBetween: 50,
navigation: { // ナビゲーション（矢印）
nextEl: ".test04Next__btn",
prevEl: ".test04Prev__btn",
},
thumbs: {
swiper: tabSwiperAco // タブと連動
}
});
// アコーディオン
$(document).on('click', '.accordion__item', function () {
$(this).toggleClass('open');
$(this).find('.accordion__detail').slideToggle();
});
spのみスライダースライド
HTML
<div class="swiper test06Swiper">
<ul class="swiper-wrapper test06Swiper__list">
<li class="swiper-slide">
<div class="test06Swiper__item">
<span class="test-number">1</span>
</div>
</li>
<li class="swiper-slide">
<div class="test06Swiper__item">
<span class="test-number">2</span>
</div>
</li>
<li class="swiper-slide">
<div class="test06Swiper__item">
<span class="test-number">3</span>
</div>
</li>
<li class="swiper-slide test06Swiper-slideSP">
<div class="test06Swiper__item">
<span class="test-number">1</span>
</div>
</li>
<li class="swiper-slide test06Swiper-slideSP">
<div class="test06Swiper__item">
<span class="test-number">2</span>
</div>
</li>
<li class="swiper-slide test06Swiper-slideSP">
<div class="test06Swiper__item">
<span class="test-number">3</span>
</div>
</li>
</ul>
<div class="paginationFlex">
<div class="prevBtn prevBtn-test06"></div>
<div class="pageDot pageDot-test06"></div>
<div class="nextBtn nextBtn-test06"></div>
</div>
</div><!-- swiper -->
</div><!-- test06Swiper -->
CSS
/*******************************************
spのみスライダーする
*******************************************/
.test06Swiper__item {
background-color: var(--brown);
}
.test06Swiper__list {
justify-content: space-between;
& .swiper-slide {
width: calc((100% - 30px)/3) ;
}
}
.test06Swiper-slideSP {
display: none;
}
@media screen and (max-width:768px) {
.test06Swiper {
padding-bottom: clamp(35px, 5%, 100px);
}
.test06Swiper-slideSP {
display: block;
}
}
JavaScript
/******************************************
spのみスライダー（スワイパー ）
*******************************************/
// 変数でSwiperインスタンスを管理
let test06Swiper = null;
// 初期化関数
function initSwiper() {
// 画面幅が768px未満の場合にSwiperを初期化
if (window.innerWidth < 768) {
// test06Swiperが未初期化の場合のみ初期化
if (!test06Swiper) {
test06Swiper = new Swiper('.test06Swiper', {
slidesPerView: '2', // 一度に表示するスライド数
loop: true, // スライドをループさせる
centeredSlides: true, // スライドの中心を揃える
spaceBetween: 30, // スライド間のスペース
autoplay: { // 自動再生設定
delay: 30000, // 自動再生の遅延時間（ミリ秒）
},
pagination: { // ページネーション（ドット）設定
el: '.pageDot-test06', // ドット要素のセレクタ
clickable: true, // ドットをクリック可能にする
renderBullet: function (index, className) {
// ドットの表示をカスタマイズ
if (index < 3) { // 0, 1, 2のインデックスの場合
return '<span class="' + className + '"></span>'; // ドットを表示
}
return ''; // 4つ目以降のドットは表示しない
},
},
navigation: { // ナビゲーション（矢印）設定
nextEl: ".nextBtn-test06", // 次へボタンのセレクタ
prevEl: ".prevBtn-test06", // 前へボタンのセレクタ
},
});
}
} else {
// 画面幅が768px以上の場合、Swiperを破棄
if (test06Swiper) {
test06Swiper.destroy(true, true); // Swiperインスタンスを破棄
test06Swiper = null; // インスタンスをリセット
}
}
}
// ページ読み込み時にSwiperを初期化
window.addEventListener('load', function () {
initSwiper(); // 初期化関数を呼び出す
});
// 画面サイズが変更された時にSwiperを再初期化
window.addEventListener('resize', function () {
initSwiper(); // 初期化関数を呼び出す
});