2枚の画像が中央に寄っていくスライダーの実装方法

実現したいこと

添付のように、2枚の画像が中央に寄っていくスライドを実装したいです。
以下、完成系のイメージです。

前提

スライドはswiperを使用する予定です。
（スライド自体は問題なく実装できます。）

画像を中央に寄せる動きは、「transform:translateX」を用いて実装を行おうとおもいましたが、
「transform:translateX」だと、画像ごと移動され、左右に空白ができてしまいます。

「transform:scale」も合わせて使うと左右の余白は解消されますが、
画像も拡大されてしまうので、使用はNGでおねがいしたいです。

該当のソースコード

HTML
1		<div class="mv">
2			<h1><img src="main_ttl.png"  width="" height="" alt=""></h1>
3			<div class="swiper">
4				<ul class="swiper-wrapper">
5					<li class="swiper-slide">
6						<div class="slide right"><img src="img01.jpg" alt=""></div>
7						<div class="slide left"><img src="img02.jpg" alt=""></div>
8					</li>
9					<li class="swiper-slide">
10						<div class="slide right"><img src="img03.jpg" alt=""></div>
11						<div class="slide left"><img src="img04.jpg" alt=""></div>
12					</li>
13
14				</ul><!-- /swiper-wrapper -->
15			</div><!-- /swiper -->
16		</div>

css
1.mv .swiper-slide {
2  display: flex;
3}
4
5.mv .slide {
6  object-fit: cover;
7  height: 100vh;
8  width: 100%;
9  overflow: hidden;
10}
11
12.mv .slide img {
13  -webkit-transition: 7s 1s ease-out;
14  transition: 7s 1s ease-out;
15  width: 100%;
16  height: 100vh;
17  object-fit: cover;
18  max-width: none;
19}
20
21.mv .swiper-slide[class*=-active] .right img {
22  -webkit-transition-delay: 0s;
23  transition-delay: 0s;
24  -webkit-transform: translateX(150px);
25  transform: translateX(150px);
26}
27
28.mv .swiper-slide[class*=-active] .left img {
29  -webkit-transition-delay: 0s;
30  transition-delay: 0s;
31  -webkit-transform: translateX(-150px);
32  transform: translateX(-150px);
33}
34

js
1const mySwiper = new Swiper('.mv .swiper', {
2  effect: 'fade',
3  fadeEffect: {
4    crossFade: true,
5  },
6  loop: true,
7  loopAdditionalSlides: 1,
8  speed: 2000,
9  autoplay: {
10    delay: 8000,
11    disableOnInteraction: false,
12    waitForTransition: false,
13  },
14  followFinger: false,
15});
16

退会済みユーザー

2023/05/02 09:06

センターに寄った時どういう状態かの完成イメージも添付していただいた方が良さそうです。

arisaan

2023/05/08 05:43

ご指摘ありがとうございます。完成イメージを追加いたしました。

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

回答1件

ベストアンサー

以下、雑なサンプル（※ サンプルは1画像のみ）ですが、A、Bの画像と外枠の関係性が重要かなと思いました。
空白ができるのは、画像の横幅が足りていないからではないでしょうか。

外枠300pxに対して、2枚の画像が150pxずつで外枠とぴったり合う
仮にそこから50px、各中央に寄せてしまったら空白ができるかと

style
1
2    *, *::before, *::after {
3      margin: 0;
4      padding: 0;
5      box-sizing: border-box;
6    }
7
8    .box {
9      background: transparent;
10      width: 150px;
11      height: 150px;
12      border: 1px solid #000;
13      margin: 0 auto;
14      overflow: hidden;
15    }
16
17    .boxInner {
18      background: url(https://placehold.jp/ababab/ffffff/300x150.png);
19      width: 300px;
20      height: 150px;
21      transition: transform ease 2s;
22      transform: translate(-150px, 0);
23    }

html
1
2  <div class="box">
3    <div class="boxInner"></div>
4  </div>

script
1
2    const box_inner = document.querySelector('.boxInner');
3    const imageTransform = () => {
4      setTimeout(() => {
5        box_inner.style.transform = 'translate(0, 0)';
6      }, 2000);
7    };
8
9    imageTransform();