Popup(3)photoshop(1)php(1)pug(1)seo(2)shopify(5)slick(5)swiper(6)wordpress(6)脱jQuery(3)show_chartFXfxfxタグ一覧トレード戦略(16)トレード記録(16)手法(2)book日記diarydiaryタグ一覧Apps(1)ツール(1)ライフハック(1)mailお問い合わせcontactHOMEwebSwiperを使ってタブを実装するwebSwiperを使ってタブを実装する公開日:2019/10/01javascriptswiperSwiperを使用しているサイトでタブを実装する必要が出てきた時に、Swiperを利用したらタブも実装できるんじゃない??と思って制作しました。いい感じに実装できたので、やり方を紹介していきます。制作物を見るタブの仕様flipバージョンURLパラメータによるタブの制御javascriptとhtml制作物を見る以下が制作したものです。今回のタブは次のような仕様です。タブの切り替わりにはアニメーションが選択できる。Swiperのparameter)URLパラメータによって、最初に表示するタブを制御できる。タブ1を開くタブ2を開くタブの切り替わるアニメーションで選べるのがいいです。flipなどにすると他とは違いを付けることができます。CodePen.URLパラメータによるタブの制御http://ドメイン/?tab=【index番号】で最初に表示できるタブを制御できます。2番目のタブをロード時に表示できます。URLパラメータの「tab」に関しては、jsの記述を変更すればパラメータの変更も可能です。</div></div>htmlの記述で大事なところは、タブのdata-indexです。このdata-indexを取得して、表示するslideを決定してます。data-indexは0から始めてください。タブリストのidやタブのclassは後述のjavascriptの記述を変えれば変更できます。}}initTab();簡単な説明をしていきます。6~9行目tablistIdは、タブリストのid名を入れます。要素を指定しています。tabClassは、タブのclass名を入れます。要素を指定しています。tabCurrentClassは、タブがカレントになったときに追加されるclass名を入れます。tabUrlparamは、ロード時にタブを制御するためのURLパラメータです。19行目~:tabSwiper今回のタブを実装する上で必要なオプションを入れています。autoHeightはスライダーを表示中のスライドの高さに合わせてくれるオプションです。falseだと一番コンテンツ量が多いスライドに合わせた高さになってしまうので、trueのほうがいいです。allowTouchMoveはスワイプやマウス操作でスライドの切り替え行うかどうかを決定できるオプションです。falseにしてスワイプやマウス操作でスライドが切り替わらないようにして、よりタブっぽくしています。effectはスライドの切り替わりのアニメーションを決定できます。"fade"の場合は、fadeEffectのcrossFadeをtrueにしないと上手く動かなかったので入れています。他のeffectを使用する場合は、fadeEffectオプションは使いません。28行目~:「tabItemclass」要素をクリックしたときに発火する関数34行目のslideToはSwiperのメソッドで、指定したスライドに切り替えてくれるメソッドです。「1」は1つ目のスライドでなく、2つ目のスライドです。1つ目のスライドの時は、「0」なので気をつけてください。URLのパラメータを取得する方法を参考にさせてもらいました。50行目:initTabロード時に最初に表示するタブを制御する関数です。パラメータがなかったり、パラメータが正しい値ではなかったりする場合は、1枚目を表示するようにしています。今回はSwiperをスライダーとしてではなく、タブとして使用してみました。