さよならIE9！CSSアニメーションでシンプルなスライドショーを作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 2017年4月12日、ついにWindows Vistaのサポート終了しましたね。これによってInternet Explorer 9のサポートも終了（※1）となりました。CSSアニメーションも、display:flexもやっと遠慮なく使える！（※2） ということで今回は、クロスフェード式のスライドショーを、IE9を切り捨てることでよりシンプルに実装してみましょう。 ※1 Windows Serverを除く ※2 接頭辞-ms-は必要 今回つくるスライドショー まずは完成した状態を確認してみましょう。 See the Pen 1702-completed by ligdsktschy (@lig-dsktschy) on CodePen. 一定時間ごとに画像がクロスフェードするスライドショーです。演出としてズームの効果も加えてあります。 ち
[jQuery] サムネイル付きのレスポンシブなスライドショーを作る方法
同じようなレスポンシブスライドショーの jQuery プラグインは既に多数ありますが、カスタマイズが必要な場合に多機能なプラグインだとコードをみてどこでなにをしているのかを理解するのが大変です…。今回もシンプルな機能なのでカスタマイズしやすいと思います。 サンプルデモ ◆ レスポンシブスライドショーデモ demo｜memocarilog このサンプルのコードは以下よりダウンロード出来ます。 ◆ SaoriMiyazaki/ResponsiveSlideshow_jQuery 前回と同じく横幅が狭くなった場合のサムネイル画像は、設定した min-width まで小さくなり、並びきらない場合は以下のように2段になって表示します。 HTML コード 画像をサムネイルサイズの画像と大きい画像と二種類用意します。 サムネイル画像をリスト形式で記入し ID 又は Class をふります。画像のリンク先
![[jQuery] サムネイル付きのレスポンシブなスライドショーを作る方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/48b21d9b18f48b77e8bc4094a31a807220d2b361/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F11%2Ficon.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
