swiperのスライド内で横スクロールができるようにしたい。（overflow: scroll;）

実現したいこと

swiperのスライド内で一部のoverflowコンテンツの横スクロールができるようにしたい。（overflow-x: scroll;）
そもそも不可能な実装なのか、それともslickなどの他のライブラリであれば可能なのか。ご教授いただけると幸いです・・・

前提

swiperのスライド内でoverflowコンテンツの横スクロールができるようにしたい。

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

そのままだと、スワイパーのスライドがスワイプの反応をしてしまう。
↓
allowTouchMove: false, の指定をすると、今後はスライドコンテンツ内が全く触れなくなる。

該当のソースコード

html
1                                <div class="swiper">
2                                    <div class="swiper-wrapper">
3                                        <div class="swiper-slide">
4                                            <div class="overflowContent" style="overflow-x: scroll;">
5                                                <div class="overflowItem">あいてむ１</div>
6                                                <div class="overflowItem">あいてむ2</div>
7                                                <div class="overflowItem">あいてむ3</div>
8                                                <div class="overflowItem">あいてむ4</div>
9                                            </div>
10                                        </div>
11                                        <div class="swiper-slide">
12
13                                        </div>
14                                    </div>
15                                </div>
16

補足情報（FW/ツールのバージョンなど）

Swiper 8.4.7

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

回答1件

ベストアンサー

nested: trueではダメですか？
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/0pdLnotq/

js
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" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
9    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
10    <style>
11        html,
12        body {
13            height: 100%;
14        }
15
16        .swiper {
17            width: 100%;
18            height: 100%;
19
20            .swiper-slide {
21                text-align: center;
22                font-size: 18px;
23                background: gold;
24                display: flex;
25                justify-content: center;
26                align-items: center;
27            }
28        }
29
30        .overflowContent {
31            width: 100%;
32            height: 50%;
33
34            .swiper-slide {
35                text-align: center;
36                font-size: 18px;
37                background: #fff;
38                display: flex;
39                justify-content: center;
40                align-items: center;
41            }
42        }
43    </style>
44
45</head>
46
47<body>
48    <div class="swiper">
49        <div class="swiper-wrapper">
50            <div class="swiper-slide">
51                <div class="overflowContent">
52                    <div class="swiper-wrapper">
53                        <div class="swiper-slide">あいてむ１</div>
54                        <div class="swiper-slide">あいてむ2</div>
55                        <div class="swiper-slide">あいてむ3</div>
56                        <div class="swiper-slide">あいてむ4</div>
57                    </div>
58                </div>
59            </div>
60            <div class="swiper-slide">
61                あいてむ5
62            </div>
63        </div>
64    </div>
65    <script>
66        const swiper = new Swiper('.swiper', {
67        });
68        const swiper2 = new Swiper('.overflowContent', {
69            slidesPerView: 2,
70            spaceBetween: 10,
71            nested: true
72        });
73    </script>
74</body>
75
76</html>