After extensive research, I have not been able to find a slider that meets the specific requirements of the designer. The concept is illustrated in the image below and allows for header/footer content above and below the slider.
A. The idea is to have the next image (2) partially visible on the right side, utilizing a fixed percentage of screen space, such as 10%.
B. The current image (1) will float to the left and fill the height, regardless if it is wide or narrow.
C. The amount of gray space shown will adjust based on the user's available screen space. As the images reach their full resolution, the gap will expand accordingly.
D. Conversely, when the available space decreases, the gap will shrink, and
E. Once the gap reaches a minimum size, the slides will begin to shrink.
F. Subsequently, the current slide (1) may be clipped from the left and right edges if necessary, especially with wide images.
G. The animation involves the next slide (2) sliding over to fill the initial gap, pushing out the current slide (1), creating a new gap, and then bringing in the following image partially.
Is there an existing slider that offers similar functionality, or would it be best to modify an existing one? For now, options like Flexslider have been explored, but issues arise with JavaScript resizing interfering with visibility on dual screens.
Unfortunately, image posting privileges are unavailable at this time. However, the example image can be viewed here: https://i.sstatic.net/H0qyS.jpg