こんにちは、daimaです。 本日は任意で設定した時刻によって 画像の表示/非表示を切り替えることができる表示期限付きバナーを 数行のjavascriptコードで実現する方法をご紹介します。 主な用途としては、 一度に複数の対象への期限設定が可能であり、 かつ利用方法も非常にシンプルとなっておりますので、 バナーの付け替え作業が頻出する ネットショップの工数削減などに特に力を発揮するかと思います。 デモとソースコード HTMLコード <div class="js-time_limited" data-appear_time="2020/12/25 15:45:00" data-disappear_time="2020/12/28 17:26:00"> <img src="{画像URL}" alt=""> </div> まずはHTMLコードです。 ここでのポイントはdiv要素に指定されている
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか?」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く