| ```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> |
