UI Design (like, comment, share)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Slider</title>
  <style>
    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .description {
      font-size: 13px;
    }

    .user-info img {
      width: 40px;

      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }

    .user-details {
      display: flex;
      flex-direction: column;
      line-height: 20px;
    }

    .user-details .name {
      font-weight: bold;
      color: #13152f;
    }

    .user-details .time {
      font-size: 11px;
      color: #666;
    }

    .description {
      font-size: 13px;
      color: #333;
      text-align: left;
      line-height: 22px;
      flex-grow: 1;
    }

    .card-footer {
      margin-top: auto;
    }

    .stats {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      font-size: 10px;
      color: #666;
    }

    .stats .reactions {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #eaeaea;
      padding-top: 10px;
      font-size: 13px;
      color: #666;
    }

    .actions div {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }

    .facebook-like {
      width: 15px;
      margin-bottom: 2px;
    }

    #v3-slider-container {
      overflow: hidden;
      position: relative;
      padding: 20px 5px;
      max-width: 1500px;
      margin-right: auto;
      margin-left: auto;
    }

    #v3-slider {
      display: flex;
      transition: transform 0.5s ease-in-out;
      animation: unique-scroll-text 8s linear infinite;
    }

    @keyframes unique-scroll-text {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    @keyframes upAndDown {

      0%,
      100% {
        transform: translateY(0);
      }

      25% {
        transform: translateY(-4px);
      }

      50% {
        transform: translateY(0px);
      }

      75% {
        transform: translateY(4px);
      }
    }

    @keyframes downAndUp {

      0%,
      100% {
        transform: translateY(0);
      }

      25% {
        transform: translateY(4px);
      }

      50% {
        transform: translateY(0px);
      }

      75% {
        transform: translateY(-4px);
      }
    }

    .v3-slider-card:nth-child(odd) {
      animation: upAndDown 4s infinite linear;
    }

    .v3-slider-card:nth-child(even) {
      animation: downAndUp 4s infinite linear;
    }

    .v3-slider-card {
      flex: 0 0 80%;
      max-width: 280px;
      height: 280px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      background-color: #fff;
      border: 2px solid rgb(239, 239, 243);
      border-radius: 10px;
      padding: 15px;
      box-sizing: border-box;
      gap: 10px;
      position: relative;
      margin-right: 10px;
    }

    #v3-pagination {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      display: none;
    }

    .v3-pagination-dot {
      width: 10px;
      height: 10px;
      background-color: #ccc;
      border-radius: 50%;
      margin: 0 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .v3-pagination-dot.active {
      background-color: #333;
    }
  </style>
</head>

<body>
  <div id="v3-slider-container">
    <div id="v3-slider">
      <div class="v3-slider-card">
        <div class="user-info">
          <img src="https://i.dailymail.co.uk/i/pix/2013/08/29/article-2405475-1
B8389EE000005DC-718_634x550.jpg" alt="User">
          <div class="user-details">
            <div class="name">lizaK</div>
            <div class="time">5h ago</div>

          </div>
        </div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscin
          g elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur ad
          ipiscing elit. Nullam non urna eu nisi pretium viverra.
        </div>
        <div class="card-footer">
          <div class="stats">
            <div class="reactions">
              <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/fil
es/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
              <span>1.1K</span>
            </div>
            <span>145 comments • 43 shares</span>
          </div>
          <div class="actions">
            <div>
              <i class="fa-solid fa-thumbs-up"></i> Like
            </div>
            <div>
              <i class="fa-solid fa-comment"></i> Comment
            </div>
            <div>
              <i class="fa-solid fa-share"></i> Share
            </div>
          </div>
        </div>
      </div>
      <div class="v3-slider-card">
        <div class="user-info">
          <img src="https://plus.unsplash.com/premium_photo-1689530775582-83b8ab
db5020?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cmFuZG9tJTIwcGVy
c29ufGVufDB8fDB8fHww" alt="User">
          <div class="user-details">
            <div class="name">Daneil M</div>
            <div class="time">5h ago</div>
          </div>
        </div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscin
          g elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur ad
          ipiscing elit. Nullam non urna eu nisi pretium viverra.
        </div>
        <div class="card-footer">
          <div class="stats">
            <div class="reactions">
              <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/fil
es/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
              <span>900</span>
            </div>
            <span>10 comments • 12 shares</span>
          </div>
          <div class="actions">
            <div>
              <i class="fa-solid fa-thumbs-up"></i> Like
            </div>
            <div>
              <i class="fa-solid fa-comment"></i> Comment
            </div>
            <div>
              <i class="fa-solid fa-share"></i> Share

            </div>
          </div>
        </div>
      </div>
      <div class="v3-slider-card">
        <div class="user-info">
          <img src="https://plus.unsplash.com/premium_photo-1688891564708-9b2247
085923?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fHJhbmRvbSUyMHBl
cnNvbnxlbnwwfHwwfHx8MA%3D%3D" alt="User">
          <div class="user-details">
            <div class="name">joel</div>
            <div class="time">5h ago</div>
          </div>
        </div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscin
          g elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur ad
          ipiscing elit. Nullam non urna eu nisi pretium viverra.
        </div>
        <div class="card-footer">
          <div class="stats">
            <div class="reactions">
              <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/fil
es/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
              <span>264</span>
            </div>
            <span>6 comments • 14 shares</span>
          </div>
          <div class="actions">
            <div>
              <i class="fa-solid fa-thumbs-up"></i> Like
            </div>
            <div>
              <i class="fa-solid fa-comment"></i> Comment
            </div>
            <div>
              <i class="fa-solid fa-share"></i> Share
            </div>
          </div>
        </div>
      </div>
      <div class="v3-slider-card">
        <div class="user-info">
          <img src="https://thumbs.wbm.im/pw/small/6dc1cb1116b972bb2405441d4d590
cd2.jpg" alt="User">
          <div class="user-details">
            <div class="name">Mehul g</div>
            <div class="time">5h ago</div>
          </div>
        </div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscin
          g elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur ad
          ipiscing elit. Nullam non urna eu nisi pretium viverra.
        </div>
        <div class="card-footer">
          <div class="stats">
            <div class="reactions">
              <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/fil
es/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
              <span>1.8k</span>
            </div>
            <span>8 comments • 18 shares</span>
          </div>
          <div class="actions">
            <div>
              <i class="fa-solid fa-thumbs-up"></i> Like
            </div>
            <div>
              <i class="fa-solid fa-comment"></i> Comment
            </div>
            <div>
              <i class="fa-solid fa-share"></i> Share
            </div>
          </div>
        </div>
      </div>
      <div class="v3-slider-card">
        <div class="user-info">
          <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/3
5af6a41332353.57a1ce913e889.jpg" alt="User">
          <div class="user-details">
            <div class="name">dustin</div>
            <div class="time">5h ago</div>
          </div>
        </div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscin
          g elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur ad
          ipiscing elit. Nullam non urna eu nisi pretium viverra.
        </div>
        <div class="card-footer">
          <div class="stats">
            <div class="reactions">
              <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/fil
es/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
              <span>2K</span>
            </div>
            <span>3 comments • 6 shares</span>
          </div>
          <div class="actions">
            <div>
              <i class="fa-solid fa-thumbs-up"></i> Like
            </div>
            <div>
              <i class="fa-solid fa-comment"></i> Comment
            </div>
            <div>
              <i class="fa-solid fa-share"></i> Share
            </div>
          </div>
        </div>
      </div>
      <div class="v3-slider-card">
        <div class="user-info">
          <img src="https://mir-s3-cdn-cf.behance.net/project_modules/1400/570a1
745898621.58408191aee7a.jpg" alt="User">
          <div class="user-details">
            <div class="name">jason T</div>
            <div class="time">5h ago</div>
          </div>
        </div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscin
          g elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur ad
          ipiscing elit. Nullam non urna eu nisi pretium viverra.
        </div>
        <div class="card-footer">
          <div class="stats">
            <div class="reactions">
              <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/fil
es/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
              <span>124</span>
            </div>
            <span>0 comments • 7 shares</span>
          </div>
          <div class="actions">
            <div>
              <i class="fa-solid fa-thumbs-up"></i> Like
            </div>
            <div>
              <i class="fa-solid fa-comment"></i> Comment
            </div>
            <div>
              <i class="fa-solid fa-share"></i> Share
            </div>
          </div>
        </div>
      </div>
      <div class="v3-slider-card">
        <div class="user-info">
          <img src="https://i.pinimg.com/236x/46/c5/29/46c529df39a83ddfddd79ef29
28acdc8.jpg" alt="User">
          <div class="user-details">
            <div class="name">Samuel</div>
            <div class="time">5h ago</div>
          </div>
        </div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscin
          g elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur ad
          ipiscing elit. Nullam non urna eu nisi pretium viverra.
        </div>
        <div class="card-footer">
          <div class="stats">
            <div class="reactions">
              <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/fil
es/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
              <span>57</span>
            </div>
            <span>2 comments • 2 shares</span>
          </div>
          <div class="actions">
            <div>
              <i class="fa-solid fa-thumbs-up"></i> Like
            </div>
            <div>
              <i class="fa-solid fa-comment"></i> Comment
            </div>
            <div>
              <i class="fa-solid fa-share"></i> Share
            </div>
          </div>
        </div>
      </div>
      <div class="v3-slider-card">
        <div class="user-info">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZ3CKS
rBlisr6XIRZEk66RDaBwgP53383vUw&s" alt="User">
          <div class="user-details">
            <div class="name">Liz B</div>
            <div class="time">5h ago</div>
          </div>
        </div>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscin
          g elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur ad
          ipiscing elit. Nullam non urna eu nisi pretium viverra.
        </div>
        <div class="card-footer">
          <div class="stats">
            <div class="reactions">
              <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/fil
es/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">
              <span>13</span>
            </div>
            <span>0 comments • 3 shares</span>
          </div>
          <div class="actions">
            <div>
              <i class="fa-solid fa-thumbs-up"></i> Like
            </div>
            <div>
              <i class="fa-solid fa-comment"></i> Comment
            </div>
            <div>
              <i class="fa-solid fa-share"></i> Share
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="v3-pagination"></div>
  </div>
  <script>
    const slider = document.getElementById('v3-slider');
    const pagination = document.getElementById('v3-pagination');
    const cards = Array.from(slider.children);
    const cardWidth = cards[0].offsetWidth + 10; // Includes margin
    const totalWidth = cardWidth * cards.length - 10; // Adjust total width
    const containerWidth = slider.parentElement.offsetWidth;
    let currentIndex = 0;
    let isDragging = false;
    let startX = 0;
    let currentTranslate = 0;
    let prevTranslate = 0;
    let animationID;
    const updatePagination = () => {
      document.querySelectorAll('.v3-pagination-dot').forEach((dot, index) => {
        dot.classList.toggle('active', index === currentIndex);
      });
    };

    const goToSlide = (index) => {
      currentIndex = index;
      const maxOffset = Math.max(totalWidth - containerWidth, 0); // Prevent gaps
      const offset = Math.min(currentIndex * cardWidth, maxOffset);
      slider.style.transition = 'transform 0.5s ease';
      slider.style.transform = `translateX(-${offset}px)`;
      currentTranslate = -offset;
      prevTranslate = currentTranslate;
      updatePagination();
    };
    const createPagination = () => {
      const totalSlides = cards.length;
      pagination.innerHTML = '';
      for (let i = 0; i < totalSlides; i++) {
        const dot = document.createElement('div');
        dot.classList.add('v3-pagination-dot');
        dot.innerHTML = '​'; // Add zero-width space to prevent being treate
        d as empty
        if (i === 0) dot.classList.add('active');
        dot.addEventListener('click', () => goToSlide(i));
        pagination.appendChild(dot);
      }
    };
    const autoplay = () => {
      currentIndex = (currentIndex + 1) % cards.length;
      goToSlide(currentIndex);
    };
    // Drag functionality
    slider.addEventListener('mousedown', startDrag);
    slider.addEventListener('touchstart', startDrag);
    slider.addEventListener('mouseup', endDrag);
    slider.addEventListener('touchend', endDrag);
    slider.addEventListener('mousemove', drag);
    slider.addEventListener('touchmove', drag);
    function startDrag(event) {
      isDragging = true;
      startX = getPositionX(event);
      slider.style.transition = 'none';
      cancelAnimationFrame(animationID);
    }
    function endDrag() {
      isDragging = false;
      const movedBy = currentTranslate - prevTranslate;
      if (movedBy < -50 && currentIndex < cards.length - 1) {
        currentIndex++;
      }
      if (movedBy > 50 && currentIndex > 0) {
        currentIndex--;
      }
      goToSlide(currentIndex);
    }

    function drag(event) {
      if (isDragging) {
        const currentPosition = getPositionX(event);
        currentTranslate = prevTranslate + currentPosition - startX;
        slider.style.transform = `translateX(${currentTranslate}px)`;
      }
    }
    function getPositionX(event) {
      return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
    }
    // Create pagination and resize handling
    createPagination();
    window.addEventListener('resize', () => {
      slider.style.transform = 'translateX(0)';
      currentIndex = 0;
      updatePagination();
    });
    // Start autoplay
    setInterval(autoplay, 3000);
  </script>

<script src="https://kit.fontawesome.com/3b30aad08c.js" crossorigin="anonymous"></script>
</body>

</html>