Swiperのcardsエフェクト使用時のカスタマイズ方法

実現したいこと

現在MVセクションにてswiperのeffect: cards用いて4枚のカード型スライドを表示させ1枚ずつloop処理で自動でスライド表示させたいのですが、その際にデフォルトで指定される各スライドの位置や角度を自身でカスタマイズしたいと思っています。
イメージとしては下記サイトのような形です
リンク内容
 リンク内容

ここに実現したいことを箇条書きで書いてください。

swiperのeffect: 'cards',を使用
swiperの各スライドのデフォルト位置をカスタマイズ指定
各スライドの幅はcssで指定
slidesPerViewで4枚表示

前提

ここに質問の内容を詳しく書いてください。
（例）
front.phpファイル内で通常のswiperのコードを記述して、scssにてswiperの全体の幅や各スライドの幅などを指定しています。またscript.jsファイルにてswiperのカスタマイズコードを記述しています。

発生している問題・エラーメッセージ

現在chatGPTなどで解決方法を模索しswipernの各スライドを希望の位置や角度の指定は出来たのですが、autoplayの自動でスライドが動かない状態です。特にエラーメッセージ等は出ていません。

該当のソースコード

[front.php]

ここに言語を入力
<div class="swiper mySwiper p-mv-swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" data-z-index="4" data-translate="23px, 59px, 0" data-rotate="-7deg" data-scale="1"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/swiper-img03.jpg" alt=""></div>
        <div class="swiper-slide" data-z-index="3" data-translate="-217px, 31px, 0" data-rotate="0" data-scale="1"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/swiper-img02.jpg" alt=""></div>
        <div class="swiper-slide" data-z-index="2" data-translate="-417px, 0px, 0" data-rotate="4deg" data-scale="1"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/swiper-img01.jpg" alt=""></div>
        <div class="swiper-slide" data-z-index="1" data-translate="-613px, 43px, 0" data-rotate="9deg" data-scale="1"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/swiper-img04.jpg" alt=""></div>
      </div>
    </div>

[p-mv.scss]

//   スワイパー
.p-mv-swiper {
    width: calc(637 / 1240 * 100%);
}
//Swiper 本体
.swiper {
    width: 300px;
    height: 486px;
    display: flex;
    justify-content: center;
    margin-left: myrem(132);
}
//スライド全体
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    color: #fff;

    width: 300px;
    height: 400px;
    border: solid 10px $white;
    box-shadow: 0 0 8px 0 rgba($color: #333, $alpha: .25);
}
.swiper-slide img {
    height: 100%;
}
// ↓各スライドのカスタマイズ
.p-mv-swiper .swiper-slide:nth-child(1){
    transform: translate3d(23px, 59px, 0) rotate(-7deg)!important;
}
.p-mv-swiper .swiper-slide:nth-child(2){
    transform: translate3d(-217px, 31px, 0) rotate(0deg)!important;
}
.p-mv-swiper .swiper-slide:nth-child(3){
    transform: translate3d(-417px, 0px, 0) rotate(4deg)!important;
}
.p-mv-swiper .swiper-slide:nth-child(4){
    transform: translate3d(-613px, 43px, 0) rotate(9deg)!important;
}

[script.js]

var
1  effect: 'cards',
2  autoplay: {
3    delay: 2000, // 3秒ごとにスライド
4    disableOnInteraction: true,
5  },
6  loop: true,
7  grabCursor: true,
8  on: {
9    init: function () {
10      // 初期状態をデータ属性から適用
11      this.slides.forEach((slide) => {
12        const zIndex = slide.getAttribute('data-z-index');
13        const translate = slide.getAttribute('data-translate');
14        const rotate = slide.getAttribute('data-rotate');
15        const scale = slide.getAttribute('data-scale');
16
17        // データ属性に基づいて各スライドの初期位置を設定
18        slide.style.zIndex = zIndex;
19        slide.style.transform = `translate3d(${translate}) rotateZ(${rotate}) scale(${scale})`;
20      });
21    },
22    slideChangeTransitionStart: function () {
23      const activeIndex = this.activeIndex;
24
25      this.slides.forEach((slide, index) => {
26        const defaultZIndex = slide.getAttribute('data-z-index');
27        const defaultTranslate = slide.getAttribute('data-translate');
28        const defaultRotate = slide.getAttribute('data-rotate');
29        const defaultScale = slide.getAttribute('data-scale');
30
31        const position = (index - activeIndex + this.slides.length) % this.slides.length;
32
33        // 各スライドの位置とz-indexを更新
34        if (position === 0) {
35          slide.style.zIndex = '4';
36          slide.style.transform = `translate3d(${defaultTranslate}) rotateZ(${defaultRotate}) scale(${defaultScale})`;
37        } else if (position === 1) {
38          slide.style.zIndex = '3';
39          slide.style.transform = `translate3d(calc(${defaultTranslate} - 240px), 0, 0) rotateZ(${defaultRotate}) scale(0.9)`;
40        } else if (position === 2) {
41          slide.style.zIndex = '2';
42          slide.style.transform = `translate3d(calc(${defaultTranslate} - 480px), 0, 0) rotateZ(${defaultRotate}) scale(0.8)`;
43        } else {
44          slide.style.zIndex = '1';
45          slide.style.transform = `translate3d(calc(${defaultTranslate} - 720px), 0, 0) rotateZ(${defaultRotate}) scale(0.7)`;
46        }
47      });
48    }
49  }
50});

試したこと

cardsEffectのオプションのperSlideOffsetやperSlideRotateを使ってみたが個別の指定ができなかったり、位置の指定がスライド毎に出来なかったので断念。
ChatGPTで調べたり色々試行錯誤しましたが上手く理解できず、そもそもswiperでは限度があるのかやりたいように実装可能か分からないのでどなたか経験ある方ご教授頂ければ幸いです。
こちらでの質問は初めてになるので何か足りない情報があればお伝え下さい。

Lhankor_Mhy

2024/11/11 11:41

effect: 'cards' は必須条件ですか？　effect: "creative" ではダメですか？ https://swiperjs.com/demos/257-effect-creative/core https://swiperjs.com/swiper-api#creative-effect

dale08

2024/11/12 03:04 編集

コメント頂きありがとうございます。 effect: 'cards'は必須ではないのです、creativeで試してみたのですが現在のスライド(アクティブスライド)が真ん中に来てしまう為上手くいきません、アクティブスライドは4枚表示中の一番左の一番上(z-index)にしたくそれに続いて残りの3枚を少し被せるようにtransform: rotateやtranslateXなどを適用させるイメージです

Lhankor_Mhy

2024/11/12 10:56

エフェクトはどちらでもいいのですね。理解しました。

行動規範の内容に同意します

回答1件

ベストアンサー

こういう感じでしょうか？

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/hx7f81vu/

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@acab/reset.css">
9    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
10        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
11    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
12    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
13    <style>
14        .swiper-slide {
15            border: solid 10px white;
16            box-shadow: 0 0 8px 0 rgba(#3338);
17            object-fit: cover;
18        }
19    </style>
20</head>
21
22<body>
23    ここに言語を入力
24    <div class="swiper mySwiper p-mv-swiper">
25        <div class="swiper-wrapper">
26            <img class="swiper-slide" src="http://placehold.jp/100x150.png?text=swiper-img01.jpg" alt="">
27            <img class="swiper-slide" src="http://placehold.jp/100x150.png?text=swiper-img02.jpg" alt="">
28            <img class="swiper-slide" src="http://placehold.jp/100x150.png?text=swiper-img03.jpg" alt="">
29            <img class="swiper-slide" src="http://placehold.jp/100x150.png?text=swiper-img04.jpg" alt="">
30            <img class="swiper-slide" src="http://placehold.jp/100x150.png?text=swiper-img01.jpg" alt="">
31            <img class="swiper-slide" src="http://placehold.jp/100x150.png?text=swiper-img02.jpg" alt="">
32            <img class="swiper-slide" src="http://placehold.jp/100x150.png?text=swiper-img03.jpg" alt="">
33            <img class="swiper-slide" src="http://placehold.jp/100x150.png?text=swiper-img04.jpg" alt="">
34        </div>
35    </div>
36    <script>
37        const swiper = new Swiper('.swiper', {
38            slidesPerView: 4,
39            // slidesPerView: "auto",
40
41            grabCursor: true,
42            effect: "creative",
43            loop: true,
44            creativeEffect: {
45                limitProgress: 3,
46                // perspective: false,
47                prev: {
48                    translate: [-10, 0, 0],
49                    rotate: [0, 0, -10],
50                    scale: 0.8,
51                    opacity: 0,
52                    origin: "left bottom",
53                },
54                next: {
55                    translate: [10, 0, 0],
56                    rotate: [0, 0, 10],
57                    opacity: 1,
58                    origin: "left bottom",
59                },
60            },
61            autoplay: true,
62        });
63    </script>
64</body>
65
66</html>