Как встроить карусель Instagram в определенный индекс? - PullRequest
Новая
       31

Как встроить карусель Instagram в определенный индекс?

6 голосов
/ 23 марта 2019

Я использую https://api.instagram.com/oembed для встраивания карусели Instagram (например, https://www.instagram.com/p/BvRwa1tArMo).

. Мне было интересно, есть ли способ выбрать индекс изображения карусели. Например, в этомВ этом случае я хотел бы, чтобы врезка показала второе изображение вместо первого.

Мой упрощенный код: 

$.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>

(По какой-то причине он не работает здесь полностью, но работает в jsfiddle: https://jsfiddle.net/43veku7t/)

1 Ответ

3 голосов
/ 29 марта 2019

Ну, вы можете взять ширину элемента li._-1_m6 (я ненавижу обфусцированные имена классов со страстью), который в контексте jsfiddle равен 658.406px, а затем взглянуть на свойство translateX * Класс 1003 * (посмотрите, есть ли еще надежный способ определить это). При translateX, равном 0, вы находитесь с индексом 0, затем при translateX, равном -658 (и изменяете), вы находитесь с индексом 1 (или, я думаю, -1)? Несмотря на это, я не уверен, что вы вообще сможете получить доступ к этой информации, потому что это iframe и весь разгром CORS. Я не уверен, что позволяет Instagram.

Если это не сработает, извините, нет пути.

...