【jQuery】フルスクリーンカルーセルOwl Carousel 2 Thumbnails

jQuery

Owl Carousel 2 Thumbnails

September 22, 2015

Owl Carousel 2.0を使用したサムネイルカルーセルプラグイン。フルスクリーンで表示され、スワイプにも対応。

CSS

<link rel=stylesheet href="assets/owl.carousel.css">

HTMLマークアップ

サムネイルを分けて指定。

<div class="owl-carousel" data-slider-id="1">
    <div>Your Content</div>
    <div>Your Content</div>
    <div>Your Content</div>
    <div>Your Content</div>
</div>
<div class="owl-thumbs" data-slider-id="1">
    <button class="owl-thumb-item">slide 1</button>
    <button class="owl-thumb-item">slide 2</button>
    <button class="owl-thumb-item">slide 3</button>
    <button class="owl-thumb-item">slide 4</button>
</div>

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="assets/owl.carousel.js"></script>
<script src="assets/owl.carousel2.thumbs.min.js"></script>

オプション

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    // Enable thumbnails
    thumbs: true,

    // When only using images in your slide (like the demo) use this option to dynamicly create thumbnails without using the attribute data-thumb.
    thumbImage: false,

    // Enable this if you have pre-rendered thumbnails in your html instead of letting this plugin generate them. This is recommended as it will prevent FOUC
    thumbPrerendered: true,

    // Class that will be used on the thumbnail container
    thumbContainerClass: 'owl-thumbs',

    // Class that will be used on the thumbnail item's
    thumbItemClass: 'owl-thumb-item'
  });
});

サムネイル自動生成

画像サイズが同じ場合はいいかもしれません。

<style>
  *{
      -webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
      -moz-box-sizing: border-box;    /* Firefox 1 - 28 */
      box-sizing: border-box;
  }
  body,html{
      height: 100%;
  }
  img{
    vertical-align: middle;
  }
  .owl-carousel{
      height: 100%;
  }
  .owl-carousel .owl-item,.owl-carousel .item{
      height: 100vh;
  }
  .owl-carousel .owl-item img{
      transform-style: initial;
      height: 100%;
      object-fit: cover;
  }
  .owl-thumb-item img{
      width: 150px;
      height: auto;
  }
  .owl-thumbs{
    position: absolute;
    bottom: 0;
    left: 0;
    display: table;
    width: 100%;
    text-align: center;
    padding: 5%;
  }
  .owl-thumb-item{
    display: table-cell;
    border: none;
    background: none;
    padding: 0;
    opacity: .4;
  }
  .owl-thumb-item.active{
    opacity: 1;
  }
</style>

<div class="owl-carousel">
    <div class="item">
      <img src="">
    </div>
    <div class="item">
      <img src="">
    </div>
    <div class="item">
      <img src="">
    </div>
    <div class="item">
      <img src="">
    </div>
    <div class="item">
      <img src="">
    </div>
</div>

<script>
  var owl = $('.owl-carousel');
  owl.owlCarousel({
      loop: true,
      items: 1,
      thumbs: true,
      thumbImage: true,
      thumbContainerClass: 'owl-thumbs',
      thumbItemClass: 'owl-thumb-item'
  });
</script>

Latest Posts

Related Posts