Webflow Hero Slider using Swiper JS

Page-before-body-closing.html

<script>
/**
 * Activate swiper.js for testimonials
 */
doHeroSlider();
function doHeroSlider() {
	// get hero slider element
	const heroSlider = document.getElementById('heroSlider');
  
	// shut it down if slider isn't present
	if (!heroSlider) return;
  
	// create and attach swiper nav elements
	const heroSliderWrapper = heroSlider.querySelector('.swiper-wrapper');
	const swiperNav = document.createElement('div');
	const swiperPrev = document.createElement('div');
	const swiperNext = document.createElement('div');
	swiperNav.classList.add('swiper-pagination');
	swiperPrev.classList.add('swiper-button-prev');
	swiperNext.classList.add('swiper-button-next');
	heroSliderWrapper.after(swiperNext);
	heroSliderWrapper.after(swiperPrev);
	heroSliderWrapper.after(swiperNav);
  
	// initialize swiper
	const swiper = new Swiper(heroSlider, {
		a11y: {
			slideRole: 'listitem',
		},
		direction: 'horizontal',
		loop: true,
		autoplay: true,
		pagination: {
			el: '.swiper-pagination',
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});
}
</script>

Page-inside-head.html

<style>
:root {
	--swiper-navigation-size: 34px;
	--swiper-theme-color: #FFFFFF;
	--swiper-pagination-color: #222222;
	--swiper-pagination-bottom: 1px;
	--swiper-pagination-bullet-width: 12px;
	--swiper-pagination-bullet-height: 12px;
}
@media (max-width: 767px) {
	.swiper-button-prev, .swiper-button-next {
		display: none;
	}
}
</style>