February 7, 2022 at 2:12 pm
#1339360
Hi,
You would need to make your adjustments in HTML, such as shown on the Getting Started page
and add your Navigation Parameters to the initialize script
For this example I used the Infinite loop with slides per group because it seems to be the closest to what you want.
So first we need to import the core Swiper JS & CSS files and set the initialize script in our child theme functions.php file in Appearance ▸ Editor:
function Swiper_from_CDN(){
?>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: true,
loopFillGroupWithBlank: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
});
</script>
<?php
}
add_action('wp_head', 'Swiper_from_CDN');
Then on our test page in a code block element add this code:
<style>
.swiper {
width: 100%;
height: 100vh;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
the expected results should be:
I linked to my working example below, so this should help you get started, you will still need to add your images, a little more css for style and any other parameters you wanted.
Best regards,
Mike