アイフォン（iPhone）のiframe（インラインフレーム）と相性が良かったスライダー＜Flickity＞

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

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

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

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

［flickity］公式サイト：http://flickity.metafizzy.co

CDN

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

HTML

<div class="carousel" data-flickity='{ "autoPlay": true }'>
  <div class="carousel-cell"><img src="https://placehold.it/150x150" alt=""/></div>
  <div class="carousel-cell"><img src="https://placehold.it/150x150" alt=""/></div>
  <div class="carousel-cell"><img src="https://placehold.it/150x150" alt=""/></div>
  <div class="carousel-cell"><img src="https://placehold.it/150x150" alt=""/></div>
  <div class="carousel-cell"><img src="https://placehold.it/150x150" alt=""/></div>
  <div class="carousel-cell"><img src="https://placehold.it/150x150" alt=""/></div>
  <div class="carousel-cell"><img src="https://placehold.it/150x150" alt=""/></div>
  <div class="carousel-cell"><img src="https://placehold.it/150x150" alt=""/></div>
  <div class="carousel-cell"><img src="https://placehold.it/150x150" alt=""/></div>
  <div class="carousel-cell"><img src="https://placehold.it/150x150" alt=""/></div>
</div>

</div>

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

オプション

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

HTMLに直接記述

<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>

1	<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>

JavaScript

var elem = document.querySelector('.main-carousel');
var flkty = new Flickity( elem, {
  // options
  cellAlign: 'left',
  contain: true
});

// element argument can be a selector string
//   for an individual element
var flkty = new Flickity( '.main-carousel', {
  // options
});

var elem = document.querySelector('.main-carousel');

var flkty = new Flickity( elem, {

// options

cellAlign: 'left',

contain: true

});

// element argument can be a selector string

// for an individual element

var flkty = new Flickity( '.main-carousel', {

// options

});

jQuery

$('.main-carousel').flickity({
  // options
  cellAlign: 'left',
  contain: true
});

$('.main-carousel').flickity({

// options

cellAlign: 'left',

contain: true

});

主なオプション

■セルの基準値・・・基準値を’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

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

Flickity v2 · Options

Touch, responsive, flickable carousels

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

Flickity v2 · Style

Touch, responsive, flickable carousels

サンプル（JavaScript指定）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flickityサンプル</title>
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<style>
.carousel {
  background: #EEE;
}
.carousel-cell {
  width: 230px;
  height: 230px;
  margin-right: 10px;
  background: #FFF;
  border-radius: 5px;
  border: 1px #414141 solid;
  padding: 10px;
}
</style>
</head>

<body>
<div class="carousel">

<div class="carousel-cell">
<img src="https://placehold.it/400x400" width="100%">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" width="100%">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" width="100%">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" width="100%">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" width="100%">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" width="100%">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" width="100%">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" width="100%">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" width="100%">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" width="100%">
</div>

</div>

<script>
var elem = document.querySelector('.carousel');
var flkty = new Flickity( elem, {
  // options
  autoPlay: true,
  draggable: true,
  freeScroll: true,
  wrapAround: true
});
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Flickityサンプル</title>

<style>

.carousel {

background: #EEE;

}

.carousel-cell {

width: 230px;

height: 230px;

margin-right: 10px;

background: #FFF;

border-radius: 5px;

border: 1px #414141 solid;

padding: 10px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

var elem = document.querySelector('.carousel');

var flkty = new Flickity( elem, {

// options

autoPlay: true,

draggable: true,

freeScroll: true,

wrapAround: true

});

</script>

</body>

</html>

サンプルBootstrap4（jQuery指定）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FlickityサンプルBootstrap4</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<style>
.carousel {
  background: #EEE;
}
.carousel-cell {
  width: 230px;
  height: 230px;
  margin-right: 10px;
  background: #FFF;
  border-radius: 5px;
  border: 1px #414141 solid;
  padding: 10px;
}
</style>
</head>

<body>

<div class="container">
<div class="carousel">

<div class="carousel-cell">
<img src="https://placehold.it/400x400" class="img-fluid">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" class="img-fluid">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" class="img-fluid">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" class="img-fluid">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" class="img-fluid">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" class="img-fluid">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" class="img-fluid">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" class="img-fluid">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" class="img-fluid">
</div>

<div class="carousel-cell">
<img src="https://placehold.it/400x400" class="img-fluid">
</div>

</div>
</div>

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- flickity JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
$('.carousel').flickity({
  // options
  autoPlay: true,
  draggable: true,
  freeScroll: true,
  wrapAround: true
});
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>FlickityサンプルBootstrap4</title>

<style>

.carousel {

background: #EEE;

}

.carousel-cell {

width: 230px;

height: 230px;

margin-right: 10px;

background: #FFF;

border-radius: 5px;

border: 1px #414141 solid;

padding: 10px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

$('.carousel').flickity({

// options

autoPlay: true,

draggable: true,

freeScroll: true,

wrapAround: true

});

</script>

</body>

</html>

サンプル（HTMLに直接記述）

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