Owl Carousel2

Basic demo

by lemon kazi

HTML

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
</div>

  <!-- ↓↓ Instagramの画像を表示したい箇所に貼り付けてください！ ↓↓ -->
  <div class="instagram-gallery"></div>
  <!-- ↑↑ Instagramの画像を表示したい箇所に貼り付けてください！ ↑↑ -->
      <!-- ↓↓ </body>の直前に貼り付けてください（jQuery読込済の場合はscript.jsのみでOK） ↓↓ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>

<!-- ↑↑ </body>の直前に貼り付けてください（jQuery読込済の場合はscript.jsのみでOK） ↑↑ -->

CSS

.owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
}

  .instagram-gallery {
    max-width: 640px;
    margin: auto;
  }
  .instagram-gallery__list {
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
  }
  .instagram-gallery__item {
    min-width: 33.333%;
    width: 33.333%;
    padding: 0px;
  }

JavaScript

$.getJSON("php/instagram.php", function(instagramData){  


const galleryData = instagramData["data"]["business_discovery"]["media"]["data"];    let photos = '<ul class="instagram-gallery__list">';    
for (let i = 0; i < galleryData.length; i++) {      
if (galleryData[i]["thumbnail_url"]) {        photos += '<li class="instagram-gallery__item"><a href="' + galleryData[i].permalink + '" target="_blank" rel="noopener"><img src="' + galleryData[i].thumbnail_url + '" alt="' + galleryData[i].caption + '"></a></li>';      } else {        photos += '<li class="instagram-gallery__item"><a href="' + galleryData[i].permalink + '" target="_blank" rel="noopener"><img src="' + galleryData[i].media_url + '" alt="' + galleryData[i].caption + '"></a></li>';      }    };    photos += "</ul>";    $(".instagram-gallery").append(photos);  });