Vue Js Js Horizontal Scrollable Image List Example

<!DOCTYPE html>
<html>

<body>
  <div id="app">
    <h3>Vue js Horizontal Scrollable Image List Example</h3>
    <div class="image-container">
      <div class="image-wrapper">
        <img src="https://www.sarkarinaukriexams.com/images/import/sne4446407201.png" alt="Image 1" />
      </div>
      <div class="image-wrapper">
        <img src="https://www.sarkarinaukriexams.com/images/import/sne86811832.png" alt="Image 2" />
      </div>
      <div class="image-wrapper">
        <img src="https://www.sarkarinaukriexams.com/images/import/sne10272423583.png" alt="Image 3" />
      </div>
      <div class="image-wrapper">
        <img src="https://www.sarkarinaukriexams.com/images/import/sne1586776004.png" alt="Image 4" />
      </div>
      <div class="image-wrapper">
        <img src="https://www.sarkarinaukriexams.com/images/import/sne20464172895.png" alt="Image 5" />
      </div>
    </div>

</div>

.image-container {
      display: flex;
      overflow-x: scroll;
      padding: 0 20px;
      /* Add padding to the left and right sides */
    }

.image-wrapper {
      margin: 0 5px;
    }

img {
      width: 300px;
      height: auto;
      margin: 0 5px;
    }
  </style>
</body>

</html>