タグ

JavaScriptとSwiperに関するjytechのブックマーク (2)

  • 【デモあり】Swiperでプログレスバーを実装する方法 - 株式会社TANE-be|大阪にあるWebサイト制作

    こんにちは、TANE-beエンジニアです。 今回はスライダーとプログレスバーを実装してみたいと思います。 スライダーにはSwiper.jsを使用します。 まずはデモページをご覧ください。 画像の下で動いている黄色のバーがプログレスバーです。 プログレスバーを実装すると、現在見えていないコンテンツが存在し切り替わることがわかりやすくなります。スライダー内容を見せるために速度を落としたい箇所や、スライダーとわかりにくい箇所に実装すると効果的です。 同じ効果をもつ仕様としては、左右のコンテンツを示すボタンや、ページナビゲーションのドットなどを実装することもありますね。 ボタンやページナビゲーションはデフォルトに機能で実装が可能なことが多いですが、プログレスバーは少し自分でコードを書く必要があります。今回はその実装をご紹介していきます。 簡単に実装できるので、ぜひ試してみてください。 swiper

    【デモあり】Swiperでプログレスバーを実装する方法 - 株式会社TANE-be|大阪にあるWebサイト制作
  • 【最新】Swiperの使い方・カスタマイズを解説!サンプルやオプション15個付き ー基礎から応用までー | 東京のホームページ制作 / WEB制作会社 BRISK

    TOPブログ【最新】Swiperの使い方・カスタマイズを解説!サンプルやオプション15個付き ー基礎から応用までー Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。 初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。 メインビジュアルの作例5つ(#11 ~ #15)については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様

    【最新】Swiperの使い方・カスタマイズを解説!サンプルやオプション15個付き ー基礎から応用までー | 東京のホームページ制作 / WEB制作会社 BRISK
  • 1