STUDIOでInstagram投稿を横に流す方法｜SnapWidgetで無限スクロールを実装

<div class="instagram-slider">
    <div class="instagram-track">

        <!-- SnapWidget 1 -->
        <script src="https://snapwidget.com/js/snapwidget.js"></script>

        <iframe
            src="https://snapwidget.com/embed/あなたのID"
            class="snapwidget-widget"
            allowtransparency="true"
            frameborder="0"
            scrolling="no">
        </iframe>

        <!-- SnapWidget 2（複製） -->
        <iframe
            src="https://snapwidget.com/embed/あなたのID"
            class="snapwidget-widget"
            allowtransparency="true"
            frameborder="0"
            scrolling="no">
        </iframe>
        
    </div>
</div>

<style>

.instagram-slider{
    width:100%;
    overflow:hidden;
}

.instagram-track{
    display:flex;
    width:200%;
    animation:instagramScroll 60s linear infinite;
}

.snapwidget-widget{
    width:100vw !important;
    aspect-ratio: 5 / 1;
    border:none;
    flex-shrink:0;
    padding-left: 5px;
}

@keyframes instagramScroll{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-100vw);
    }

}

/* ホバーで停止 */
.instagram-track:hover{
    animation-play-state:paused;
}

</style>