89 lines
5.3 KiB
PHP
89 lines
5.3 KiB
PHP
<!-- Carousel -->
|
|
<div class="position-relative mx-2 mx-sm-0">
|
|
<div class="swiper"
|
|
data-swiper='{
|
|
"slidesPerView": 1,
|
|
"spaceBetween": 24,
|
|
"loop": true,
|
|
"autoHeight": true,
|
|
"navigation": {
|
|
"prevEl": ".btn-prev",
|
|
"nextEl": ".btn-next"
|
|
},
|
|
"breakpoints": {
|
|
"500": {
|
|
"slidesPerView": 2
|
|
},
|
|
"992": {
|
|
"slidesPerView": 3
|
|
}
|
|
}
|
|
}'>
|
|
<div class="swiper-wrapper">
|
|
<!-- Article -->
|
|
<article class="swiper-slide">
|
|
<a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
|
|
href="{{ route('second', ['help', 'single-article-v2']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
|
|
<img src="/img/help/article01.jpg" class="hover-effect-target" alt="Image">
|
|
</a>
|
|
<div class="pt-4">
|
|
<div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">October 2, 2024</div>
|
|
<h3 class="h5 mb-2">How to Choose the Right Golf Ball</h3>
|
|
<p class="mb-3">Selecting the perfect golf ball can significantly impact your game. Our comprehensive
|
|
guide covers everything from compression and cover material to dimple patterns and
|
|
swing weight considerations.</p>
|
|
<a class="btn btn-sm btn-primary" href="#">Read More</a>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Article -->
|
|
<article class="swiper-slide">
|
|
<a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
|
|
href="{{ route('second', ['help', 'single-article-v2']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
|
|
<img src="/img/help/article02.jpg" class="hover-effect-target" alt="Image">
|
|
</a>
|
|
<div class="pt-4">
|
|
<div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">October 2, 2024</div>
|
|
<h3 class="h5 mb-2">Golf Club Membership Benefits</h3>
|
|
<p class="mb-3">Join our exclusive golf club for premium benefits including early access
|
|
to new products, member-only tournaments, and special discounts throughout the
|
|
year.</p>
|
|
<a class="btn btn-sm btn-primary" href="#">Learn More</a>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Article -->
|
|
<article class="swiper-slide">
|
|
<a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
|
|
href="{{ route('second', ['help', 'single-article-v2']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
|
|
<img src="/img/help/article03.jpg" class="hover-effect-target" alt="Image">
|
|
</a>
|
|
<div class="pt-4">
|
|
<div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">October 2, 2024</div>
|
|
<h3 class="h5 mb-2">Understanding Golf Course Ratings</h3>
|
|
<p class="mb-3">Learn how to interpret golf course difficulty ratings and slope
|
|
ratings to choose courses that match your skill level perfectly.</p>
|
|
<a class="btn btn-sm btn-primary" href="#">Explore Courses</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<!-- Prev button -->
|
|
<div class="position-absolute top-50 start-0 z-2 translate-middle hover-effect-target mt-n5">
|
|
<button type="button"
|
|
class="btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start"
|
|
aria-label="Prev">
|
|
<i class="ci-chevron-left fs-lg animate-target"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Next button -->
|
|
<div class="position-absolute top-50 start-100 z-2 translate-middle hover-effect-target mt-n5">
|
|
<button type="button"
|
|
class="btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
|
|
aria-label="Next">
|
|
<i class="ci-chevron-right fs-lg animate-target"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|