[swiper.js].swiper-slideを動的に追加する方法

できた。

経緯とか

swiper.jsを使ってスライドショーを作る。

スライドショーの中身は通常HTMLでベタ打ちしているところを、jsで管理できないかなと思った。というのは対象となるページがphpとかじゃないのでベタ打ちするしかない。連想配列で管理できたら楽じゃない?と思った。

とりあえず慣れたjQueryで.swiper-slideを追加してみたけどだめだった。優先順位の問題かと思ってjsで追加してもだめだった。追加はされるけどスライドの動作的にバグる。

対処法。

要するに、な説明。

jsの処理の優先順位的に目をつけたのは間違いじゃなかったけど記述位置とかライブラリがどうのこうのじゃなかった。jQueryで追加しても、ちゃんと組めば普通に動作する。

$(function(){
    //.swiper-slideを追加する内容
    //.swiperを動かす内容
})

これでいい。特別、設定内容に何かしなきゃいけないわけでもなく、$(function(){})にswiperの記述も突っ込めば良い。先に追加を書かないと追加される前にswiperが稼働して追加が適用されないので注意。

作ってみた感想

jsで管理できるようになったのはいいんだけど、むしろめんどくさくなった感じがする。どうせファイルを開いて編集するんだからベタ打ちでいいじゃんね。スライドごとにcssやら何やらを変えることだってあるし、単純に自分の首を絞めるだけだと思う。wpでカスタムフィールドと絡めるのとはわけが違う、素人に触れないことは変わらないので不要なギミックだった。

コメント

タイトルとURLをコピーしました