Me gustaría crear un control deslizante con la biblioteca swiper.js que contenga imágenes de la misma altura pero anchos variables; solo debe verse una imagen a la vez (sin imágenes recortadas a los lados del control deslizante), las flechas de navegación deben aparecer a la izquierda y a la derecha de cada diapositiva y la diapositiva debe estar alineada a la izquierda (no centrada). Diseño deseado:

Pero el diseño que pude manejar es así:

Como puede ver, el contenedor del control deslizante tiene un ancho fijo, por lo que la flecha hacia la derecha no se adapta al ancho de la diapositiva real. Estas son mis configuraciones de control deslizante:

 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', }, });

Y se puede ver en el trabajo en este violín:

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

¿Cómo puedo lograr mi diseño deseado? Si no es posible con slider.js, también aprecio otras bibliotecas/soluciones.