I'm using a magazine-style swiper.js slider which (after the title page) displays images in pairs, corresponding to the left/right magazine spread pages.
The images in each slide are centered by default, so as you widen the browser, the slider widens, and so does each slide (the blue border in the example) and instead of respecting swiper's spaceBetween setting, the pages get forced further apart, which is undesirable.
While the responsive behaviour is fine overall, I'd like the left page to be justified right in the slide, and the right page to be justified left, so as the slider, and the slides widen, the pages will still stay together. (And the captions, ideally)
So far, I've yet to find a way to achieve this, so some help would be much appreciated!
Here's a one-page html example:
<!doctype html><html><head><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /><script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script><script language="javascript"><!-- $("document").ready(function() { const swiper = new Swiper('.swiper', { // Optional parameters direction: 'horizontal', loop: false, zoom: { maxRatio: 2, }, speed: 400, spaceBetween: 10, mousewheel: { invert: true, }, slidesPerView: 1, centeredSlides: false, slidesPerGroupSkip: 1, grabCursor: true, keyboard: { enabled: true, }, breakpoints: { 850: { slidesPerView: 2, slidesPerGroup: 2, }, }, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); }); // --></script><style> .swiper { height: 600px; } .swiper-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding-top: 20px; padding-bottom: 30px; width: 50%; /* Set the width of each slide to 50% to display two slides side by side */ border: 1px solid blue; } .swiper-slide img { display: block; border-radius: 6px; }</style></head><body><!-- Slider main container --><div class="swiper"><!-- Additional required wrapper --><div class="swiper-wrapper"><!-- Slides --><div class="swiper-slide"><div class="swiper-zoom-container"><img src='image' class='img-fluid'></div><p>first page</p></div><div class="swiper-slide"><div class="swiper-zoom-container"><img src='image' class='img-fluid'></div><p>some caption</p></div><div class="swiper-slide"><div class="swiper-zoom-container"><img src='image' class='img-fluid'></div><p>different caption</p></div><div class="swiper-slide"><div class="swiper-zoom-container"><img src='image' class='img-fluid'></div><p>caption</p></div><div class="swiper-slide"><div class="swiper-zoom-container"><img src='image' class='img-fluid'></div><p>blah</p></div></div><!-- If we need navigation buttons --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></body></html>So run the example, scroll right to page 2&3 and note the images are centered in each blue bordered slide. Make the browser wider, and you'll see the slider gets wider, and the images stay centered - forcing them apart. I'd like them to stay together as the browser widens, to maintain the magazine-style spread.
Thanks!
Update: Ok, the main issue is fixed, all I really needed to do was to add flex box aligns to the zoom container (obviously, this will need to alternate between flex-start and flex-end for each page to keep them together).
.swiper-zoom-container { align-content: flex-start; justify-content: flex-start; }The reason this was hard to diagnose was a bunch of bootstrap and other weird things messing up the layout, making it hard to determine the affect of any changes. I had to simply and strip it right down to find the conflicts - I usually find posting the issue online is usually a way to bootstrap (heh!) me actually finding to solution....