スライダーをインラインフレームで読み込む、そんなページでアイフォンで不具合が・・・・・

アイフォンとインラインフレームはとても相性が良くない、悩みの種ですね。「Netscape Navigator」全盛期にはマイクロソフトの「IE」の我がまま仕様に困らせられた。

今はiPhoneに泣かされています。

今回のスライダーをインラインフレームで読み込むページ、いろいろなスライダーの中で相性が良かったのが「Flickity」、今後はインラインフレームで読み込む場合は「Flickity」をメインに使用していこうと思います。

[flickity]公式サイト:http://flickity.metafizzy.co

CDN

HTML

基本的にはこれだけで動きます。

オプション

オプション指定は3種類の方法があります。

HTMLに直接記述

JavaScript

jQuery

主なオプション

■セルの基準値・・・基準値を’center’,’left’,’right’で指定する。デフォルトは’center’
cellAlign: ‘left’

■無限スクロール・・・デフォルトはfalse
wrapAround: true

■セルをスライドでグループ化
groupCells: true
groupCells: 2
groupCells: ‘80%’

■自動再生・・・デフォルトはfalse、trueで3秒間隔で自動スクロール。秒数を指定したい場合は1500などミリ秒で指定する。
autoPlay: true
autoPlay: 1500 // 1.5 seconds

■スライドの高さに合わせてカルーセルの高さを変える
adaptiveHeight: true

■画像の遅延読み込み
lazyLoad: true

※各種オプションは下記を参考

https://flickity.metafizzy.co/options.html

※各種スタイルシートは下記を参考

https://flickity.metafizzy.co/style.html

サンプル(JavaScript指定)

 

サンプルBootstrap4(jQuery指定)

 

サンプル(HTMLに直接記述)

最初のサンプルを参考にしてください。

 

スポンサーリンク