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

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

Owl Carousel 2は以下のデモ・ダウンロードページから

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>
 
Owl Carousel 2 Thumbnails

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

  • LATEST
  • RELATED
  • POPULAR