開発

Ionic v1系ion-slides(Swiper)の正しいオプション項目と左右に待機しているスライドを表示させる方法

更新日:

ion-slidesのオプション設定

Ionic v1系にはion-slidesというスライダーが用意されていて簡単にスライドショーを設置させることができます。

ion-slides - Directive in module ionic

これの中身はSwiperというjQueryを使用しないスライダーで作られています。上記ページからもリンクが貼られているので詳しいオプション項目はリンク先を参考にしようとするのが普通です。

ところがどうやらバージョンが違うらしく、設定してもうまく反映されないオプションがあることが判明。

正しいオプション設定は下記サイトを参考にしてください。

swiper.js使ってみたからそのオプションについて – なんかいろいろデザインする人

左右に待機しているスライドを表示させる

スライダー

スライダーのライブラリはいろいろな種類があり、他のスライダーのデモには左右に待機しているスライドが少しだけ見えるものがあります。

Ionic v1でこれを再現しようと思いましたが、Swiperには特にそれらしい設定項目が見当たりません。

かと言って新たにjQueryやスライダーのライブラリを入れるのはあまり得策とは言えないため、何とか既存のSwiperでできないものかと調べてみました。

slidesPerViewという項目を見ると、どうやら表示するスライドの枚数を指定できるようです。

サンプルでは

slidesPerView: 3

などと設定していて3枚のスライドが丸ごと表示されています。

他の項目を一通り調べてもそれらしい設定は見当たらず、ふと思い立ってslidesPerViewに小数を設定してみると、左右に待機しているスライドが部分的に表示されるようになりました。

これにはcenteredSlidesをtrueにしておく必要があります。

左右に待機しているスライドを半透明にする

上記設定で左右に待機しているスライドが部分的に見えるようになりましたが、主張が強すぎるので待機しているスライドを半透明にしたいという要望がありました。

ついでに設置したネクスト、バックボタンも非アクティブの時は半透明にしています。

ちなみにIonic v1系で使われているSwiperではループを設定してしまうと、最後のスライドの後にそのまま最初には戻らず、ゴーストのようなスライドが作られてそれを表示することでループするようになっています。

ゴーストのクラスは更新されないため、どの位置にスライドが来ているか判別することは困難です。特にループを設定しなくても巻き戻しのような動作で最初に戻るので極力ループを使わないことをおすすめします。

※要sass

スライダー全体にmypage-slideクラスを設定すると左右のスライドと非アクティブのボタンの透明度を下げるようにしています。

また、Paginationの色も変更したかったのでswiper-pagination-bulletとswiper-pagination-bullet-activeのbackground-colorを書き換えています。

-開発
-,

Copyright© Workerブログ|仕事を続けるための工夫 , 2020 All Rights Reserved Powered by STINGER.