Gallery - sitebuilderone/wp-sitebuilderone GitHub Wiki

<section>
	<!-- lazily load the Swiper CSS file -->
	<link rel="preload" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

	<!-- lazily load the Swiper JS file -->
	<script defer="defer" src="https://unpkg.com/swiper@8/swiper-bundle.min.js" onload="initializeSwiperVozo();"></script>

	<!-- lc-needs-hard-refresh -->
	<script>
	function initializeSwiperVozo(){
	 	// Launch SwiperJS  
		const swiper = new Swiper(".mySwiper-vozo", {
				slidesPerView: 1,
				grabCursor: true,
				spaceBetween: 30,
				pagination: {
					el: ".swiper-pagination",
					clickable: true,
				},
				breakpoints: {
				640: {
					slidesPerView: 1,
					spaceBetween: 20,
				},
				768: {
					slidesPerView: 2,
					spaceBetween: 30,
				},
				1024: {
					slidesPerView: 3,
					spaceBetween: 30,
				},
			},
		});
	}
 </script>

	<div class="container py-6">
		<div class="lc-block text-center">
			<div editable="rich">
				<h2 class="mb-3 display-6 fw-bold">Lovely Customers</h2>
			</div>
		</div>
		<div class="lc-block text-center mb-5">
			<div editable="rich">
				<p class="mb-3 lead">Customers are Awesome. Check what our clients are saying about us.</p>
			</div>
		</div>
		<div class="row align-items-center py-2">
			<div class="position-relative">
				<img src="https://cdn.livecanvas.com/media/svg/fffuel/svg-shape-11.svg" width="256" height="256" srcset="" sizes="" alt="Made by fffuel.com" class="d-none d-xl-block position-absolute top-0 start-0 translate-middle mt wp-image-2412" loading="lazy">
				<!-- Slider main container -->
				<div class="swiper mySwiper-vozo position-relative">

					<tangible class="live-refresh">
						<!-- Additional required wrapper -->
						<if acf_field="one_testimonials" from="options">
							<div class="swiper-wrapper mb-5">
								<!-- Loop through ACF Repeater for Swiper Slides -->
								<loop acf_repeater="one_testimonials" from="options">
									<div class="swiper-slide lc-block">
										<div class="card p-3">
											<div class="card-body">
												<div class="lc-block mb-4">
													<div editable="rich">
														<p>
															<em class="rfs-8 text-muted">
																<field name="one_testimonial_review"></field>
															</em>
														</p>
													</div>
												</div>
												<div class="lc-block d-inline-flex">
													<div class="lc-block me-3" style="min-width:72px">
														<if acf_field="one_testimonial_image">
															<img class="img-fluid rounded-circle" src="{Field name='one_testimonial_image'}" width="72" height="72" alt="{Field name='one_testimonial_name'}">
															<else>
																<img class="img-fluid rounded-circle" src="https://i.pravatar.cc/96" width="72" height="72" alt="Placeholder">
															</else>
														</if>
													</div>
													<div class="lc-block">
														<div editable="rich">
															<p class="h5">
																<field name="one_testimonial_name"></field>
															</p>
															<p class="text-muted">
																<field name="one_testimonial_company"></field>
															</p>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</loop>
							</div>
						</if>
					</tangible>

					<div class="swiper-pagination"></div>
				</div>
			</div>
		</div>
	</div>
</section>