Sebonego's picture
why does it look so unprofessional?
3729349 verified
```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>