レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
レスポンシブ、スマホアクションに強いスライダー【Flickity】が便利！！ - Qiita
今まではスライダーといえば、bxsliderを使っていたのですが、スマホアクションやループの仕様等で案件と合わなかったり、使いづらく思うことがあったのでなにかないかな〜といろいろ調べていたところ、「Flickity」という良さげなスライダープラグインを見つけたので紹介します。 どなたかのお役に立つといいなと思います。 このスライダーのいいところはユーザーがストレスを感じない動きや反応をしてくれるところです。特にスマホのフリックやループの動き、ドラッグアンドドロップのスライドの動きがスムーズです。 また、jqueryなしで単体でも動いてくれます。 公式サイト https://flickity.metafizzy.co/ 主な機能 ・スマホ対応 タッチデバイスへの対応です。左右にビューっと動かせて、慣性スクロールも自然で操作していて気持ちいいところがFlickityを使いたくなる主な理由と言っ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
