少し前に創作キャラのページにモーダルとその中にスライダーを導入したので
そちらの簡単な備忘録です。
創作キャラ紹介ページはこちら→
キャラクターのアイコンをクリックするとモーダルが出て、
左にキャラクターの絵のスライダー、右に紹介テキストがある形です。
アイコンにしている絵はまたちゃんと描く予定なので仮ですが…！
今後もまたちょこちょこ改良していく予定です。
導入したプラグイン
jsはまともに書けないので
モーダルの導入にはjQueryプラグインの「Remodal」、
スライダーの導入にはjQuery非依存の「Swiper」を使用しました。
最初はスライダーもjQueryプラグインの「Slick」を使用しようとしていたのですが、なかなかうまくいかず…
調べてみるとSlickはモーダルやタブ切り替えなど初期状態がdisplay:noneのときにエラーが出てしまうようで、
Swiperに変更したところうまくいきました。
意外と詰まったところなのでメモ。
プラグインを読み込んだら後は記述していくだけです。
プラグインは使い方を検索したらすぐ書き方が出てくるので有難いですね…！
Swiperのページネーションをスライドの外側に設置
また、swiperはデフォルトでは丸形のページネーションが画像の中に設置されているのですが、
絵と被って見づらいので外に出しました。
外に出す方法も検索すると沢山出てくるのですが、少し手こずったのでメモしておきます。
私は下記の方法で上手くいきました。
<div class="swiper"><!-- slide -->
<div class="swiper-wrapper"><!-- slide-item -->
<div class="swiper-slide"><img src="https://placehold.jp/FDF4F5/FDF4F5/300x400.png" alt="" /></div>
<div class="swiper-slide"><img src="https://placehold.jp/E8A0BF/E8A0BF/300x400.png" alt="" /></div>
<div class="swiper-slide"><img src="https://placehold.jp/BA90C6/BA90C6/300x400.png" alt="" /></div>
</div>
<div class="swiper-pagination"></div>
</div>.swiper{
width:min(100%,300px);
height:400px;
padding-bottom:40px;
box-sizing: content-box;
}
.swiper-slide{
width:100%;
height:100%;
display: flex;
align-items: center;
}
.swiper-pagination {
bottom: -10px;
}
ポイントは、swiperクラスに追加しているpadding-bottom: 40pxとbox-sizing: content-boxです。
この2つを追加しないと、いくらswiper-paginationの位置を変更しても表示されません。
おわりに
こんな感じでモーダルとスライダーを設置したのですが、ひとつ問題が…
本当はスライダーをデモのように自動でスライドしてほしいのですが、
相性が悪いのかモーダルの中では動いてくれません(´・ω・`)
また時間があるときに方法を探ってみたいと思います！