How to embed an Instagram carousel in particular index?

Question

I'm using https://api.instagram.com/oembed to embed an Instagram carousel (e.g. https://www.instagram.com/p/BvRwa1tArMo).

I was wondering if there's a way to select the index of the carousel image. For example, in this case, I'd like the embedding to show the second image instead of the first one.

My simplified code is:

$.get(
  'https://api.instagram.com/oembed?url=https://www.instagram.com/p/BvRwa1tArMo&hidecaption=1&omitscript=1',
  function (data) {
    $('#ig-post').html(data.html);
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.instagram.com/embed.js"></script>
<div id="ig-post"></div>

(For some reason it doesn't fully work here but it does in jsfiddle: https://jsfiddle.net/43veku7t/)

Answer 1

Well you could take the width of the li._-1_m6 (I hate obfuscated class names with a passion) element, which in the context of the jsfiddle is 658.406px and then take a look at the translateX property of the .MreMs class (see if there's any more of a robust way to determine this). At a translateX of 0, youre at index 0, then at a translateX of -658 (and change) you're at index 1 (or -1 i guess?). All that being said, I'm not sure if you'll even be able to access this info due to it being an iframe and the whole CORS debacle. I'm not sure what Instagram allows.

If that doesn't work, then I'm sorry to say, there's no way.