Horizontal Swiper With Auto Width Image (full viewport)

Hi all,

I’m working on a 100vw x 100vh project that scrolls horizontally. My goal is to setup Swiper to load each image at its original aspect ratio (rather than automatically setting each to half of the screen’s vw in pixels). This is currently ALMOST working – but I’m experiencing some issues with the overall container width (I have a “reach end” declaration at the end that triggers the next page, and now with auto widths, it either triggers too soon or too late, leaving us with empty space beyond the slider OR cutting to the next page before we finish making our way through the slides).

See here for an example: http://cs.biglow.co/test.php

Wondering if anyone has experienced similar / if anyone has any thoughts on this. Is it possible to dynamically set the width of a swiper-slide and then have the swiper-wrapper (or container) adjust it’s overall width accordingly?


PS: some code:

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 1.45,
    spaceBetween: 0,
    freeMode: true,
    mousewheel: true,
    speed: 1000,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',

swiper.on(‘reachEnd’, function() {
window.location.href = “/projects/next”;