How to use Hammer.js for swiping?

So i've got hammer.js swipe to work on my div. the swipe region looks like this

https://i.sstatic.net/x1a82.jpg

so basically, i want the orange area to be able to swipe left/right and when it reaches the end (on both sides), it halts swiping.

the script and etc :

var containerDiv = document.getElementById('list-container');
var listDiv = document.getElementById('train-line-list');

// Create a manager to manager the element
var manager = new Hammer.Manager(listDiv);

// Create a recognizer
var Swipe = new Hammer.Swipe();

// Add the recognizer to the manager
manager.add(Swipe);

// Declare global variables to swiped correct distance
var deltaX = 0;
var deltaY = 0;

// Subscribe to a desired event
manager.on('swipe', function(e) {
    deltaX = deltaX + e.deltaX;
    var direction = e.offsetDirection;
    var translate3d = 'translate3d(' + deltaX + 'px, 0, 0)';

     if (direction === 4 || direction === 2) {
         e.target.innerText = deltaX;
         e.target.style.transform = translate3d;
     }
});

<div id="list-container">
    <div id="train-line-list">
    <img id="" src="">
        <img id="" src="">
</div>

#list-container{
z-index: 10;
position:fixed;
top:60%;
left:0;
width:100%;
height:40%;
}
#train-line-list{
width: 95%;
height: 95%;
top: 2%;
margin: 0 auto;
position: relative;
}

like i said, the swiping sort of works but the images disappear. why does this happen and how can i fix it? Also, the swiping is not very "reactive" in a way, like its slow. not natural. is there an alternative? or a better way to implement? Also, just realized, the images can be swiped as well ?? how do i "lock" the images. i just want the container of the images to be swiped.

Solution

Here is a working example

<html>
  <head>
    <style>
      #box {
        background-color: red;
        height: 100px;
        width: 100px;
        margin-right: 10px;
      }

      #collection {
        display: flex;
        flex-direction: horizontal;
      }

      #container {
        display: flex;
        background-color: aqua;
        padding: 50px 0px 50px 0px;
        overflow: scroll;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
  </head>

  <body>
    <div id="container">
      <div id="collection">
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
        <div id="box"></div>
      </div>
    </div>

    <script>
      var container = document.getElementById("container");
      var content = document.getElementById("collection");
      var hammer = new Hammer(container);

      var initialX = 0;
      var deltaX = 0;
      var offset = initialX + deltaX;

      hammer.on("panleft panright", function(ev) {
        deltaX = ev.deltaX;
        offset = initialX + deltaX;

        container.scroll(-offset, 0);
      });

      Hammer.on(container, "mouseup", function(e) {
        initialX = offset;
      });
    </script>
  </body>
</html>

You could replace the squares with your images.