横スクロールのサンプル

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    
    <script data-require="riot.js@3.0.4" data-semver="3.0.4" src="//cdnjs.cloudflare.com/ajax/libs/riot/3.0.4/riot+compiler.min.js"></script>
    <script src="list-item.tag" type="riot/tag"></script>
    <script>
    riot.mount('list-item');
    </script>

  </head>

  <body>
    <list-item></list-item>
  </body>

</html>

メインは横スクロールのサンプル
Riot.jsも使ってみてる

<list-item>
  <ul>
    <li each={ items } ><img class="cover" src='{ url }' alt=""></li>
  </ul>
  
  <style>
        :scope {
            display: block;
        }

        .cover {
            object-fit: cover;
            width: 200px;
            height: 200px;
            background-color: #ccc;
            border: 1px solid #ccc;
        }

        /*画像リストを横スクロール*/
        ul {
            overflow-x: scroll;
            white-space: nowrap;
        }
        li {
            display: inline-block;
            padding-right: 5px;
        }
    </style>
    
    <script>
    this.items = [
                    {"url" : "https://c1.staticflickr.com/4/3641/3472867267_0b8e31f3fd_q.jpg"},
                    {"url" : "https://c1.staticflickr.com/2/1677/24688208386_89582b33ac_q.jpg"},
                    {"url" : "https://c1.staticflickr.com/4/3878/15116765570_73c8d0399a_q.jpg"},
                    {"url" : "https://c1.staticflickr.com/8/7315/9665358037_dc8c7fdf1c_q.jpg"}
                ];
    </script>
    
</list-item>