oc-social-plugin/components/facebookpagefeed/default.htm

<div class="relative -mx-6">

    <div class="flex pb-16 pt-5 slides-1 sm_slides-2 lg_slides-3" data-glider-prev="#glider-prev" data-glider-next="#glider-next" data-glider-dots="#glider-dots" data-glider-autostart data-glider-interval="7000" data-glider-lazyload data-glider>
        {% for post in __SELF__.posts %}
            <div class="px-3">
                <a href="{{post.href}}" class="flex flex-col h-full box shadow-lg hover:shadow-2xl rounded-lg overflow-hidden" target="_BLANK">
                    {% if post.featuredImage %}
                        <script type="text/html" data-lazy data-src="img">
                            <img {{ post.featuredImage | resize('box', 'calc(100vw - 1.5rem)|640:calc(50vw - 1.5rem)|1024:calc(33vw - 1.5rem)|1152:360px') }} class="object-cover w-full h-48">
                        </script>
                        <div data-dest="img"></div>
                    {% endif %}
                    <div class="flex items-end justify-between px-6 py-3 bg-gray-100">
                        {% if __SELF__.logo %}
                        <script type="text/html" data-lazy data-src="logo">
                            <img src="{{__SELF__.logo|media}}" class="w-8">
                        </script>
                        <div data-dest="logo"></div>
                        {% endif %}
                        <div class="text-xs text-gray-500">{{post.created_at | human}}</div>
                    </div>
                    <div class="flex-grow p-6 pt-0 text-sm text-gray-600 bg-gray-100">
                        {{post.intro}} …
                    </div>
                    <div class="flex px-6 py-3 bg-gray-100 items-center border border-t">
                        {{post.page.icon|sprite('w-6 h-6 mr-3 fill-current text-primary-500')}}
                        <span class="text-sm text-gray-600">Beitrag anschauen</span>
                    </div>
                </a>
            </div>
        {% endfor %}
    </div>

    <div class="absolute top-0 left-0 flex items-center h-full ml-3">
        <span id="glider-prev" class="flex items-center justify-center w-10 h-10 bg-black-t400">
            {{'chevron' | sprite('w-6 h-6 text-white cursor-pointer fill-current')}}
        </span>
    </div>

    <div class="absolute top-0 right-0 flex items-center h-full mr-3">
        <span id="glider-next" class="flex items-center justify-center w-10 h-10 bg-black-t400">
            {{'chevron' | sprite('w-6 h-6 text-white cursor-pointer fill-current rotate-180 transform')}}
        </span>
    </div>

</div>

<div class="-mt-10 relative" id="glider-dots"></div>