スライドショーの動きを教えてください

前提・実現したいこと

http://burgers.journal-standard.jp/
こちらのHPのTOPのスライドショーの動きを教えてください。

(JS初心者です。html,cssはなんとか組めるようになりましたが、
CSSアニメーションなどは使用したことがありません。)

①slideshow.jsが使用されていますが、slick.jsでも実装可能ですか？

②ソースを拝見していると、backgroundimgで画像が指定されていますが、
htmlに直接書き込むのではなく、backgroundimgで画像を使用して方がいいのですか？

③仕組み、組む工程を教えていただきたいです。簡単に、
最初の画像はscale:1から始まる
→次の画像がscale:1.2になっており、画面が切り替わる際、これがscale:1になる
→前の画像はscale:1.2になるようにする
というところまでは理解できたのですが、
JSの部分で、どのように指定していくのか、できれば細かく教えていただきたいです。

よろしくお願い致します。

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

動きません。。
現在、以下のコードで進めています。

該当のソースコード

HTML
1
2	<div id="top" class="active0">
3            <div class="top_slider transition">
4              <div class="top_bg">
5                <li class="slide0">
6                  <img src="img/top_bg01.png" alt="">
7                </li>
8                <li class="slide1">
9                  <img src="img/top_bg02.png" alt="">
10                </li>
11                <li class="slide2">
12                  <img src="img/top_bg03.png" alt="">
13                </li class="slide3">
14                <li>
15                  <img src="img/top_bg04.png" alt="">
16                </li>
17              </div>
18          </div>
19        </div>

試したこと

コピペで色々試しましたが、（class/id名を変更して）動きませんでした。
background等も試しました。
※slick.jsをプラグインしています

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

m.ts10806

2018/10/10 01:49

質問タイトルは要件、つまり質問内容に寄せた内容にしてください。JavaScriptの質問であることはタグでわかります。https://teratail.com/help/question-tips#questionTips3-1

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

回答1件

ベストアンサー

①slideshow.jsが使用されていますが、slick.jsでも実装可能ですか？

完全に同じ動きは無理かと思いますが、近いところで言えばslick.jsのデモに
「fade」というものがあるので、それは比較的近いかなと思います。

②ソースを拝見していると、backgroundimgで画像が指定されていますが、

htmlに直接書き込むのではなく、backgroundimgで画像を使用して方がいいのですか？

HTMLに直接書き込む＝imgタグを使うで解釈しますが、実装するならどちらでも構わないと思います。
SEO上の理由とかそういうところまでこだわるのであれば使い分けは必要です。
また、下記にも書きますが、画像切り替えのタイミングでクラス名が変わっているので
background-imageで画像を指定した方が無駄に処理が増えなくて良いということかもしれません。

③仕組み、組む工程を教えていただきたいです。簡単に、

最初の画像はscale:1から始まる
→次の画像がscale:1.2になっており、画面が切り替わる際、これがscale:1になる
→前の画像はscale:1.2になるようにする
というところまでは理解できたのですが、
JSの部分で、どのように指定していくのか、できれば細かく教えていただきたいです。

そこまで細かくはないと思うので大雑把に。
常時繰り返しではないので、CSSのtransitionというプロパティで実現可能かと思います。
CSSで設定したアニメーションが行われるので、:hoverや
Javascriptによるクラス名の付け外しでアニメーションさせることができます。
css transition アニメーションなどで検索すればサンプルが出てくると思うので
まずは調べてやってみてください。

Javascript部でどうなっているかは、画像が切り替わるタイミングで
該当するDOMのクラス名を変更しているくらいかと思います。
（もっといろいろしてるかもしれませんが、アニメーションするだけならこれで十分です。）

コピペで色々試しましたが、（class/id名を変更して）動きませんでした。

background等も試しました。
※slick.jsをプラグインしています

HTML部しか見れないのでCSSやJSがどうなっているかわかりませんが、
CSSで正しく設定するか、slick.jsの正しい使い方をしないと動きません。
bootstrapのようにクラス名が指定されていれば参考元と同じクラス名をつければ動きますが、
おそらくクラス名で指定しているわけではないので、CSSorJSを正しく書く必要があります。

投稿2018/10/10 05:35