display partial sliders/side padding using splide

as you can see in the images, splides demo has spacing between the sliders. i copied the code exactly and the slides are touching. i want a gap between them. How would you do this?

<body>
        <section id="image-carousel" class="splide"
            aria-label="Beautiful Images">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <img
                            src="https://th.bing.com/th/id/R.fbabf48626f686c234fb11a5a2ea3775?rik=082x0cClFqLbig&riu=http%3a%2f%2fsplidejs.com%2fimages%2fslides%2ffull%2f01.jpg&ehk=%2fWsS6qfQhyxiACXLqZV5NxqLljy18m0qoXlLW3MXNbA%3d&risl=&pid=ImgRaw&r=0"
                            alt>
                    </li>
                    <li class="splide__slide">
                        <img
                            src="https://th.bing.com/th/id/R.be080585c0da64067404b23530a814ce?rik=vjGDbB2xFyn9Sw&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2016%2f03%2f10%2f318375-nature-landscape-lake-mountain-forest-wildflowers-spring-pine_trees-path-Switzerland-HDR.jpg&ehk=W21nAe%2fQYSWkLQF83VxX2RflaJ7eKm%2fm0J4pW85PpjU%3d&risl=&pid=ImgRaw&r=0"
                            alt>
                    </li>
                    <li class="splide__slide">
                        <img
                            src="https://th.bing.com/th/id/R.7554469478facf078b3de643749f06d9?rik=J7govmz%2bm%2fAQYQ&pid=ImgRaw&r=0"
                            alt>
                    </li>
                </ul>
            </div>
        </section>
        <script>

var splide = new Splide( '.splide', {
  type   : 'loop',
  padding: '3rem',
  height: '800px',
  gap    : 20,
  
} ).mount();
</script>

tried modifying the code but didnt change in the way i want. instead what i tried, just shows the image/next image beneath the main one.

Solution

I think the images should be width 100%. Yes that helped. Also, don't forget the units for the gap property.

img {
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

<body>
  <section id="image-carousel" class="splide" aria-label="Beautiful Images">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
          <img src="https://picsum.photos/id/200/800/600" alt>
        </li>
        <li class="splide__slide">
          <img src="https://picsum.photos/id/201/800/600" alt>
        </li>
        <li class="splide__slide">
          <img src="https://picsum.photos/id/202/800/600" alt>
        </li>
      </ul>
    </div>
  </section>
  <script>
    var splide = new Splide('.splide', {
      type: 'loop',
      gap: '3rem',
      padding: '3rem',

    }).mount();
  </script>