ブレイクポイントでSwiperの作成/解除を行う
最近は脱jQueryのため、slickではなく、Swiperを使うこともあります。 まだ数回しか使ったことないですが、色々オプションもあって、理解すれば応用が効くな！という印象です。 慣れの問題でしょうが、まだslickのほうがやりたいことをすぐできていて、Swiperだと大変なこともありますが、これから頑張って使っていきます。 ここから本題ですが、今回やったことを言葉で表すのは難しかったので、とりあえず、次のcodepenで挙動を確認してください。 右上の「EDIT ON CODEPEN」をクリックして、別タブで開いて、width 800pxを境にどう変わるかを見てください。 ※当サイトではコンテンツエリアが800px以上にはならないです。 See the Pen swiper responsive by takblog (@blanks-site) on CodePen. 800px以
レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
