swiper.jsを使ったスライダー機能の実装可否について

Question

前提

スライダーの実装方法を教えていただきたいです。

実現したいこと

javascriptで下記のURLのヘッダーのようなスライダーアニメーションを実装したいです。
https://tokyugardencity.com/

試したこと

下記でもぺージ等を見てたのですが、Demoやリファレンスを見ていても全然実装できる気がしません。
そもそも、swiperjsを使って実装可能ですか？
1から手組で組む必要がありますでしょうか？

https://swiperjs.com/demos#rewind

Answer 1

リンク先は、検証ツールでクラス名や動きを見てみると、swiper.js を使っているっぽいです。
ただ、今なら、CSS アニメーションで実装できそうです。

試しにサンプル作成してみました。

CSS SlideShow Zoom

Comments

[strawberrysouth]

ありがとうございます！
求めていた動きです！
この参考サイトのページネーションもCSSだけでつけられますか？

あと、勉強不足ですみません、
[今なら、CSS アニメーションで実装できそうです。]ということは昔はcssアニメーションで対応してなかったけど最近はこれくらいならCSSで作れちゃうということですか？
では、swiper.jsを使うと有効なのでしょうか？

[hatena19]

このようなプラグインを使うメリットは、cssアニメーションについて学習していなくても、それなりの機能とデザインのものを簡単に導入できるということでしょうか。

ただ、裏でスクリプトが動き続けることになりますので、CPU負荷か大きくなりますね。リンク先のページでは多用しているので、表示したままにしておくとCPUファンがうなりだします。

特にアニメーション関係はCSSで大抵とのことはできますし、JSでのアニメーションより軽い動作になりますので、CSSアニメーションについて学習されることをお勧めします。

[strawberrysouth]

ありがとうございます！
因みに、ページネーションもCSSアニメーションだけで作れるってことですかね？

[strawberrysouth]

今調べたら作れそうですね！
ありがとうございます！勉強してみます。