背景画像をクリックでスライドさせるには
Q&A
Closed
背景画像をクリックでスライドさせるためには、どのようなコードを指定すればよいでしょうか？また、そのときに、画面にあるボタンを押しても、背景画像が反応しないようにしたいです。１週間ぐらいこの処理が書けなくてとても困っています。助けてください (´;ω;｀)
0
2Answer
回答者が以前の質問を見ていない場合もあります。新たに質問を投稿する際には、実装したい仕様、現状のコード、詰まっている点などを具体的に記載していただけると助かります。
また、過去の質問で未クローズのものがあり、回答に未返信のものもあるようです。その状態で新しい質問を投稿するのは、以前の質問に回答してくださった方に対して失礼になってしまうかもしれません。ひとつひとつ試してみた結果などを回答していただき、それでも問題が解決しない場合に新しい質問として投稿していただけるとありがたいです。
過去の質問でも指摘があったかと思いますが、同じような質問が複数投稿されると他の方の質問が目立たなくなり、回答が付きにくくなることがあります。そういった点にもご配慮いただきながら、質問掲示板を活用していただけると幸いです。
2Like
Comments
質問内容に関してですが、
以前の質問の @southkey47様 の回答にもありますが、やりたいことはslickで実現できるように思います。
要件として、ライブラリなどは利用せず自ら実装する必要があったりするのでしょうか？
学習のために自らで実装してみたいといった感じでしょうか…？@codeazuki
Questioner
Jqueryはあまり使わない方がいいと噂で聞いたことがあるので、避けたいと感じました。実際は、使ってもいいのですか？
個人的にはjQueryを利用しても別に構わないと思います。
噂にとのことですが、避けた方がいい理由などは確認されていますでしょうか？どうしてもjQueryを避けたいのであれば、その他スライダー・カルーセルを実装するプラグインはいくつかあるので、自分で使いやすそうなものを選んで使ってみるのもありかと思います。
もちろん、1から自分で実装するのもありです。
以前の質問であげていた参考サイトのように、クリックして画像を変えるくらいの処理であれば、そこまで複雑な処理ならずに実装はできると思います。参考：
@codeazuki
Questioner
ありがとうございます。
こういう感じのですか？
下記のは クリック 時に 右に 200px 移動する 背景画像のサンプルです。
background-position-x transition sample - LiveCodes
<div id="target"></div>
<style>
:root {
min-height: 100vh;
display: flex;
flex-flow: row nowrap;
body {
flex: 1;
display: flex;
flex-flow: row nowrap;
:where(#target) {
display: flex;
flex: 1;
background-image: url("画像のURL");
background-repeat: no-repeat;
background-position-x: 0;
height: 100%;
width: 100%;
}
}
&:has(.clicked) {
pointer-events:none;
}
}
</style>
<script type="module">
target.addEventListener("click", async (e) => {
const target = e.currentTarget;
target.classList.add("clicked");
const animate = target.animate(
[
{
backgroundPositionX: CSS.px("0"),
},
{
backgroundPositionX: CSS.px("200"),
},
{
backgroundPositionX: CSS.px("0"),
},
],
{
duration: 2000,
iterations: 1,
},
);
animate.play();
await animate.finished;
target.classList.remove("clicked");
});
</script>
0Like
Comments
前回までの質問を見た感じだと、カルーセルのように複数の画像をスライドしながら入れ替えたいようです。 https://qiita.com/codeazuki/questions/304f3a709e8c6fbe766e
@codeazuki
Questioner
参考になります。
