File size: 3,121 Bytes
783f99e 3729349 783f99e 3729349 783f99e 3729349 783f99e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | ```javascript
document.addEventListener('DOMContentLoaded', function() {
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Initialize Swipers with better settings
const campsSwiper = new Swiper('.camps-swiper', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
slidesPerView: 1,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
768: {
slidesPerView: 2,
},
992: {
slidesPerView: 3,
}
}
});
const teamSwiper = new Swiper('.team-swiper', {
loop: true,
autoplay: {
delay: 6000,
disableOnInteraction: false,
},
slidesPerView: 1,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
768: {
slidesPerView: 2,
},
992: {
slidesPerView: 3,
}
}
});
// Load Camps Data
const camps = [
{
name: "Mombo Camp",
location: "Chief's Island, Okavango Delta",
description: "Luxury camp with exceptional wildlife viewing",
image: "http://static.photos/safari/640x360/2"
},
{
name: "Vumbura Plains",
location: "Northern Okavango Delta",
description: "Water and land activities in a pristine wilderness",
image: "http://static.photos/safari/640x360/3"
},
{
name: "Sandibe Safari Lodge",
location: "Okavango Delta",
description: "Contemporary design meets wilderness luxury",
image: "http://static.photos/safari/640x360/4"
},
{
name: "Xigera Safari Lodge",
location: "Moremi Game Reserve",
description: "Artful luxury in the heart of the delta",
image: "http://static.photos/safari/640x360/5"
}
];
const campsWrapper = document.querySelector('.camps-swiper .swiper-wrapper');
camps.forEach(camp => {
campsWrapper.innerHTML += `
<div class="swiper-slide">
<div class="camp-card">
<div class="camp-image" style="background-image: url('${camp.image}')"></div>
<div class="camp-info">
<h3>${camp.name}</h3>
<p class="location">${camp.location}</p>
<p class="description">${camp.description}</p>
<button class="view-gallery">View Gallery</button>
</div>
</div> |