Owl Carousel 2と<picture>タグで、スマホの場合に違う比率の画像を表示する

Owl Carousel 2

レスポンシブ対応のカルーセルjQueryプラグインです。

Owl Carousel 2公式サイト

スマホで違う比率の画像を表示したい

<picture>タグを使用してOwl Carousel 2で動かすことができます。

1.jQueryを読み込みます

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

2.Owl Carousel 2のcss/jsを読み込みます

<link href="./OwlCarousel2-2.2.1/dist/assets/owl.carousel.min.css" rel="stylesheet">
<script src="./OwlCarousel2-2.2.1/dist/owl.carousel.min.js"></script>

3.カルーセル部分のHTMLを書きます

<div class="owl-carousel">
  <picture>
    <source media="(max-width: 768px)" srcset="./1_sm.jpg">
    <img src="./1.jpg" alt="">
  </picture>
  <picture>
    <source media="(max-width: 768px)" srcset="./2_sm.jpg">
    <img src="./2.jpg" alt="">
  </picture>
</div>

<source media=”(max-width: 768px)” srcset=””>の部分がスマホ・タブレットに表示する用の画像です。

4.あとはjavascriptでカルーセルにする要素を指定します。

<div class=”owl-carousel”>にOwl Carouselを割り当てます。

$(function(){
　　$(document).ready(function() {
　　　　$('.owl-carousel').owlCarousel({
　　　　　　autoplay:true,
　　　　　　autoplayTimeout:6000,
　　　　　　slideSpeed: 1000,
　　　　　　smartSpeed: 2000,
　　　　　　dragEndSpeed:800,
　　　　　　fluidSpeed:500,
　　　　　　lazyLoad : true,
　　　　　　center:true,
　　　　　　pagination : true,
　　　　　　autoWidth:false,
　　　　　　loop:true,
　　　　　　items:1
　　　　});
　　});
});

横幅をスマホサイズに縮めると、
スマホ向けの縦長画像に差し変わります。

PC用画像

スマホ用画像