index.js

//headeri responsive


document.addEventListener("DOMContentLoaded", function() {
  hamburger = document.querySelector(".hamburger");
  let ballina = document.querySelector(".ballina");
  let initialMarginTop = ballina.style.marginTop; 

  if (ballina) {
      hamburger.onclick = function(){
          navBar = document.querySelector(".nav-bar");
          navBar.classList.toggle("active");
          
          if (navBar.classList.contains("active")) {
              ballina.style.marginTop = "350px"; 
          } else {
              ballina.style.marginTop = initialMarginTop; 
              
          }
      }
  } 
});



//slider
const slides = document.querySelectorAll(".slide");
const nextBtn = document.querySelector(".nextBtn");
const prevBtn = document.querySelector(".prevBtn");
slides.forEach(function (slide, index) {
  slide.style.left = `${index * 100}%`;
});
let counter = 0;
nextBtn.addEventListener("click", function () {
  counter++;
  carousel();
});

prevBtn.addEventListener("click", function () {
  counter--;
  carousel();
});

function carousel() {
  // working with slides
  // if (counter === slides.length) {
  //   counter = 0;
  // }
  // if (counter < 0) {
  //   counter = slides.length - 1;
  // }
  // working with buttons

  if (counter < slides.length - 1) {
    nextBtn.style.display = "block";
  } else {
    nextBtn.style.display = "none";
  }
  if (counter > 0) {
    prevBtn.style.display = "block";
  } else {
    prevBtn.style.display = "none";
  }
  slides.forEach(function (slide) {
    slide.style.transform = `translateX(-${counter * 100}%)`;
  });
}

prevBtn.style.display = "none";




// slideri i lajmeve



var swiper = new Swiper(".card_slider", {
  spaceBetween: 40,
  loop: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  breakpoints: {
      320: {
          slidesPerView: 1,
        },
      480: {
        slidesPerView: 2,
      },
      768: {
        slidesPerView: 3,
      },
      960: {
          slidesPerView: 4,
        },
      1024: {
        slidesPerView: 5,
      },
    },  
});