I would like to create a slider with swiper.js library that contains images of the same height but variable widths; only one image at a time should be visible (no cropped images at the sides of the slider), navigation arrows should appear to the left and the right of each slide and the slide should be left-aligned (not centered). Desired layout:

But the layout I could manage is like this:

As you can see, the slider container has a fixed width and so the right arrow doesn't adapt to the width of the actual slide. These are my slider settings:

const swiper = new Swiper('.swiper', {
  // Optional parameters
  slidesPerView: '1',
  centeredSlides: false,
  spaceBetween: 25,
  keyboard: true,
  freeMode: true,
  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

And you can see it at work in this fiddle:

https://jsfiddle.net/madamadam/59xoht4j/

How can I achieve my desired layout? If it's not possible with slider.js, I appreciate other libraries/solutions as well.