アイフォン(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>

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

オプション

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

HTMLに直接記述

<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
});

jQuery

$('.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 · Options
Touch, responsive, flickable carousels

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

Flickity · 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>

 

サンプル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>

 

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

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

 

コメント

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