---
layout: navbar-v2-white
title: Feed Slider
---

<div id="slider-feed" class="navbar-v2-wrapper">
  <!--Feed Slider-->
  <div class="feed-slider-wrapper">
    <div class="feed-slider-inner">
      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/dan.jpg"
                  data-user-popover="1"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Dan Walker</span>
              <span>17 minutes ago</span>
            </div>
            <div class="media-right">
              <span>64 Likes</span>
              <button class="button is-liked">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/39.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/39.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/elise.jpg"
              data-user-popover="6"
              alt=""
            />
            <span
              >Liked by <span>Elise Walker</span> and
              <span>63 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/lana.jpeg"
                  data-user-popover="10"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Lana Henrikssen</span>
              <span>1 day ago</span>
            </div>
            <div class="media-right">
              <span>1.8K Likes</span>
              <button class="button is-liked">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/40.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/40.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/jenna.png"
              data-user-popover="10"
              alt=""
            />
            <span
              >Liked by <span>Jenna Davis</span> and
              <span>1861 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/stella.jpg"
                  data-user-popover="2"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Stella Bergmann</span>
              <span>45 minutes ago</span>
            </div>
            <div class="media-right">
              <span>299 Likes</span>
              <button class="button">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/41.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/41.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/bobby.jpg"
              data-user-popover="8"
              alt=""
            />
            <span
              >Liked by <span>Bobby Brown</span> and
              <span>298 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/jenna.png"
                  data-user-popover="0"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Jenna Davis</span>
              <span>3 hours ago</span>
            </div>
            <div class="media-right">
              <span>687 Likes</span>
              <button class="button">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/42.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/42.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/david.jpg"
              data-user-popover="4"
              alt=""
            />
            <span
              >Liked by <span>David Kim</span> and <span>686 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/elise.jpg"
                  data-user-popover="6"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Elise Walker</span>
              <span>1 hour ago</span>
            </div>
            <div class="media-right">
              <span>49 Likes</span>
              <button class="button is-liked">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/43.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/43.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/dan.jpg"
              data-user-popover="1"
              alt=""
            />
            <span
              >Liked by <span>Dan Walker</span> and <span>48 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/milly.jpg"
                  data-user-popover="7"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Milly Augustine</span>
              <span>6 hours ago</span>
            </div>
            <div class="media-right">
              <span>341 Likes</span>
              <button class="button is-liked">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/46.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/46.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/gaelle.jpeg"
              data-user-popover="11"
              alt=""
            />
            <span
              >Liked by <span>Gaelle Morris</span> and
              <span>340 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/dan.jpg"
                  data-user-popover="1"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Dan Walker</span>
              <span>17 minutes ago</span>
            </div>
            <div class="media-right">
              <span>64 Likes</span>
              <button class="button is-liked">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/44.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/44.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/rolf.jpg"
              data-user-popover="13"
              alt=""
            />
            <span
              >Liked by <span>Rolf Krupp</span> and <span>63 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/edward.jpeg"
                  data-user-popover="5"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Edward Mayers</span>
              <span>5 hours ago</span>
            </div>
            <div class="media-right">
              <span>16 Likes</span>
              <button class="button">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/45.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/45.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/daniel.jpg"
              data-user-popover="3"
              alt=""
            />
            <span
              >Liked by <span>Daniel Wellington</span> and
              <span>15 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/daniel.jpg"
                  data-user-popover="3"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Daniel Wellington</span>
              <span>55 minutes ago</span>
            </div>
            <div class="media-right">
              <span>129 Likes</span>
              <button class="button is-liked">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/4.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/4.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/stella.jpg"
              data-user-popover="2"
              alt=""
            />
            <span
              >Liked by <span>Stella Bergmann</span> and
              <span>128 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/stella.jpg"
                  data-user-popover="2"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Stella Bergmann</span>
              <span>8 hours ago</span>
            </div>
            <div class="media-right">
              <span>1.4K Likes</span>
              <button class="button">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/37.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/37.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/milly.jpg"
              data-user-popover="7"
              alt=""
            />
            <span
              >Liked by <span>Milly Augstine</span> and
              <span>1.4K others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/lana.jpeg"
                  data-user-popover="10"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Lana Henrikssen</span>
              <span>1 day ago</span>
            </div>
            <div class="media-right">
              <span>1.8K Likes</span>
              <button class="button is-liked">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/47.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/47.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/jenna.png"
              data-user-popover="0"
              alt=""
            />
            <span
              >Liked by <span>Jenna Davis</span> and
              <span>1.8K others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/elise.jpg"
                  data-user-popover="6"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Elise Walker</span>
              <span>2 days ago</span>
            </div>
            <div class="media-right">
              <span>664 Likes</span>
              <button class="button is-liked">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/48.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/48.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/elise.jpg"
              data-user-popover="6"
              alt=""
            />
            <span
              >Liked by <span>Elise Walker</span> and
              <span>663 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/mike.jpg"
                  data-user-popover="12"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Mike Lasalle</span>
              <span>2 days ago</span>
            </div>
            <div class="media-right">
              <span>82 Likes</span>
              <button class="button is-liked">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/49.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/49.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/rolf.jpg"
              data-user-popover="13"
              alt=""
            />
            <span
              >Liked by <span>Rolf Krupp</span> and <span>81 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/bobby.jpg"
                  data-user-popover="8"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Bobby Brown</span>
              <span>3 days ago</span>
            </div>
            <div class="media-right">
              <span>262 Likes</span>
              <button class="button">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/50.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/50.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/edward.jpeg"
              data-user-popover="5"
              alt=""
            />
            <span
              >Liked by <span>Edward Mayers</span> and
              <span>261 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/nelly.png"
                  data-user-popover="9"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Nelly Schwartz</span>
              <span>3 days ago</span>
            </div>
            <div class="media-right">
              <span>121 Likes</span>
              <button class="button is-liked">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/51.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/51.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/nelly.png"
              data-user-popover="9"
              alt=""
            />
            <span
              >Liked by <span>Nelly Schwartz</span> and
              <span>120 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/milly.jpg"
                  data-user-popover="7"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Milly Augustine</span>
              <span>5 days ago</span>
            </div>
            <div class="media-right">
              <span>278 Likes</span>
              <button class="button">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/52.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/52.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/rolf.jpg"
              data-user-popover="13"
              alt=""
            />
            <span
              >Liked by <span>Rolf Krupp</span> and
              <span>277 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/stella.jpg"
                  data-user-popover="2"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Stella Bergmann</span>
              <span>5 days ago</span>
            </div>
            <div class="media-right">
              <span>112 Likes</span>
              <button class="button">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/53.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/53.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/dan.jpg"
              data-user-popover="1"
              alt=""
            />
            <span
              >Liked by <span>Dan Walker</span> and
              <span>111 others</span></span
            >
          </div>
        </div>
      </div>

      <!--Item-->
      <div class="card feed-slider-item">
        <div class="card-header">
          <div class="media">
            <div class="media-left">
              <div class="post-avatar">
                <img
                  class="avatar"
                  src="https://via.placeholder.com/150x150"
                  data-demo-src="assets/img/avatars/dan.jpg"
                  data-user-popover="1"
                  alt=""
                />
              </div>
            </div>
            <div class="media-content">
              <span>Dan Walker</span>
              <span>6 days ago</span>
            </div>
            <div class="media-right">
              <span>95 Likes</span>
              <button class="button is-liked">
                <i data-feather="heart"></i>
              </button>
              <button class="button">
                <i data-feather="message-circle"></i>
              </button>
              <button class="button">
                <i data-feather="share-2"></i>
              </button>
              <button class="button">
                <i data-feather="more-horizontal"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="card-image">
          <figure class="image is-4by3">
            <a
              href="https://via.placeholder.com/1600x900"
              data-demo-href="assets/img/demo/unsplash/54.jpg"
              data-fancybox
              data-caption=""
            >
              <img
                src="https://via.placeholder.com/1600x900"
                data-demo-src="assets/img/demo/unsplash/54.jpg"
                alt=""
              />
            </a>
          </figure>
        </div>
        <div class="card-content">
          <div class="liked-by">
            <img
              src="https://via.placeholder.com/150x150"
              data-demo-src="assets/img/avatars/milly.jpg"
              data-user-popover="7"
              alt=""
            />
            <span
              >Liked by <span>Milly Augstine</span> and
              <span>94 others</span></span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>