Having prev and next slides visible each side of a container

[BluNub20]

Hi,

I'm trying to display the prev and next slides from each side of my container. It displaying correctly until the very last slide :

When we reach the end of the slider there is no more prev slide. Here's what it looks like :

What my settings look like :

(function() {
	new Swiper( '.page-block-project .swiper', {
		modules: [ Autoplay ],
		speed: 400,
		spaceBetween: 10,
		slidesPerView: 1.1,
		direction: 'horizontal',
		loop: true,
		touchEventsTarget: 'wrapper',
		preventInteractionOnTransition: true,
		preventClicks: true,
		preventClicksPropagation: true,
		effect: 'slide',
		preloadImages: true,
		shortSwipes: true,
		autoplay: {
			delay: 5000,
			pauseOnMouseEnter: true,
		},
		lazy: {
			loadPrevNext: true,
		},
		breakpoints: {
			700: { slidesPerView: 1.1, spaceBetween: 25, centeredSlides: false },
			1200: { slidesPerView: 2, spaceBetween: 25, centeredSlides: false },
		},
		on: {
			beforeLoopFix: function( ) {
				window.siteLazyLoad.update();
			},
		},
	});

If I put slidesPerView: 2.1, I have the desired effect, but my slides are not centered anymore in my container :

So I want to know, Is it possible to always have the next and prev slide visible outside of a container. Anyone did this and can help?

Thanks!

[Poliklot]

@BluNub20 Yes, this layout is possible. I reproduced a similar disappearing-neighbor issue using your desktop settings with a container-width Swiper and overflow: visible.

The distinction is between the content container (two full cards) and the Swiper viewport (including both outside peeks). overflow: visible exposes slides beyond Swiper's measured viewport; changing slidesPerView to 2.1 changes card sizing, which explains the alignment problem.

The approach that passed my tests on Swiper 14.2.0 was:

• Make Swiper span the full visible strip, outside the narrower content container.
• Use slidesPerView: 'auto' and set each card's CSS width to (content width - gap) / 2.
• Use equal offsets to align the two full cards with the content container.
• Add loopAdditionalSlides: 2, with enough real slides for that buffer. My demo uses 8 slides.

Simplified desktop example:

:root {
  --content-width: min(1000px, calc(100vw - 128px));
}
.content-container {
  width: var(--content-width);
  margin-inline: auto;
}
.projects-swiper {
  width: 100%; /* full-width parent, NOT .content-container */
  overflow: hidden;
}
.projects-swiper .swiper-slide {
  width: calc((var(--content-width) - 25px) / 2);
}

const el = document.querySelector('.projects-swiper');
const content = document.querySelector('.content-container');
const offset = () =>
  (el.clientWidth - content.getBoundingClientRect().width) / 2;

new Swiper(el, {
  loop: true,
  loopAdditionalSlides: 2,
  speed: 400,
  spaceBetween: 25,
  slidesPerView: 'auto',
  centeredSlides: false,
  slidesOffsetBefore: offset,
  slidesOffsetAfter: offset,
});

See the official offset options and loop slide-count requirements. The required slide count/buffer depends on your geometry; 2 is not a universal guarantee.

Recordings of the isolated reproduction (Chrome on macOS, 8 cards, 1000 px content container, 25 px gap):

1. Identical one-slide transitions: A = original layout on 14.2.0, B = changed layout on 14.2.0, C = changed layout on 12.0.3. A loses its right neighbor; B and C retain both in this sequence.

01-loop-comparison.mp4

2. Identical wide mouse drags after the same preparation: B retains both peeks, but C loses the right one.

02-wide-drag-version-comparison.mp4

Updating alone is not enough: the original layout still reproduced the issue on 14.2.0. With the layout changes, 14.2.0 passed my initial-state, 24-next/24-prev and 10-wide-drag checks. On 12.0.3, sequential transitions passed but 3 of 10 wide drags still lost a neighbor, so I would not call this a complete workaround for that version.

This is a reconstruction, not your actual site; autoplay and the external lazy-loader were excluded from these controlled checks. Which Swiper version and how many slides are you using? Could you share a minimal demo including the HTML/CSS so this can be checked against your exact setup?