SWIPER.JS: How to Place Arrows Outside of Related Products Style Slide Content

SWIPER.JS seems to be the most modern touch friendly swiper out there right now. Handles finger swiping better than others I've seen. 

Source: https://github.com/nolimits4web/swiper

Premise: You have some kind of related products slider and want to display four products and have prev/next arrows outside of the slide container.

This example also changes the basic angle bracket arrows to Font Awesome icons.

Working example: https://applesofgold.com/plain-14k-gold-women-s-cross-pendant-cr-6.html

Both the "suggested chains" and "related products" use this method.

Multiple Swipers on the Same Page: Simply change classes for right/left arrows in html and js, change class for swiper container. Everything else stays the same.

Head Tag

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" integrity="sha512-rd0qOHVMOcez6pLWPVFIv7EfSdGKLt+eafXh4RO/12Fgr41hDQxfGvoi1Vy55QIVcQEujUE1LQrATCLl2Fs+ag==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
	.swiper-button-next-unique, .swiper-button-prev-unique {
		color: #728735 !important;
		margin: auto;
	}
	.swiper-button-next-unique::after, .swiper-button-prev-unique::after {
			content: "" !important;;
	}
</style>

Body

<section class="o-layout o-layout--justify-center">

<div class="o-layout__item u-width-1 u-text-center" style="padding: 0; display: flex; align-items: center;">
	<div class="swiper-button-prev-unique" ><i class="fa-duotone fa-solid fa-square-caret-left fa-3x"></i></div>
</div>

<div class="o-layout__item u-width-10 u-text-center" style="padding: 0;">
	<div class="swiper mySwiper">
	<div class="swiper-wrapper" style="display: flex; align-items: center;">

			<div class="swiper-slide">
				Slide 1 Content
			</div>

			<div class="swiper-slide">
				Slide 2 Content
			</div>

			<div class="swiper-slide">
				Slide 3 Content
			</div>

			<div class="swiper-slide">
				Slide 4 Content
			</div>

			<div class="swiper-slide">
				Slide etc Content
			</div>
		</div>

	</div>
</div>

<div class="o-layout__item u-width-1 u-text-center" style="padding: 0; display: flex; justify-content: right; align-items: center;">
	<div class="swiper-button-next-unique"><i class="fa-duotone fa-solid fa-square-caret-right fa-3x"></i></div>
</div>

</section>

Foot

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js" integrity="sha512-Ysw1DcK1P+uYLqprEAzNQJP+J4hTx4t/3X2nbVwszao8wD+9afLjBQYjz7Uk4ADP+Er++mJoScI42ueGtQOzEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
	var swiper = new Swiper(".mySwiper", {
	  navigation: {
		nextEl: ".swiper-button-next-unique",
		prevEl: ".swiper-button-prev-unique",
	  },
		loop: true,
		slidesPerView: 1,
		spaceBetween: 30,
		slidesPerGroup: 1,
		slidesPerGroupSkip: 1,
		breakpoints: {
			600: {
			slidesPerGroup: 1,
				  slidesPerView: 1,
				spaceBetween: 20,
				slidesPerGroup: 1,
			},
			768: {
			slidesPerGroup: 3,
				slidesPerView: 3,
				spaceBetween: 30,
				slidesPerGroup: 1,
			},
			1024: {
			slidesPerGroup: 3,
				slidesPerView: 4,
				spaceBetween: 30,
				slidesPerGroup: 1,
			}
	}
	});
</script>