質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.69%
Animate CC

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

317閲覧

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

arisaan

総合スコア24

Animate CC

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/04/28 10:07

編集2023/05/09 15:03

実現したいこと

イメージ説明

添付のように、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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

Banksy_Not-him

2023/05/02 09:06

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

2023/05/08 05:43

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

回答1

0

ベストアンサー

以下、雑なサンプル(※ サンプルは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();

蛇足ですが、こういった場に学校名がわかるものとかは載せないようにしましょう。
学校名ならまだしも、仮に仕事でお客様の個人情報をそのまま載せていた、とかになったら情報漏洩になり罪に問われますよ。

投稿2023/05/09 14:25

Banksy_Not-him

総合スコア109

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答へのコメント

arisaan

2023/05/09 14:59

ありがとうございます。 そして、情報のご指摘も誠にありがとうございます。 見落としておりました。以後気をつけます。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.69%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Animate CC

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。