coffee-website-with-js/script.js at main · digitalamitchoudhary/coffee-website-with-js · GitHub

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
// const menuOpenButton = document.querySelector("#menu-open-button");

// const menuCloseButton = document.querySelector("#menu-close-button");

// menuOpenButton.addEventListener("click", ()=>{
// document.body.classList.toggle("show-mobile-menu")
// })

// menuCloseButton.addEventListener("click", ()=>
//     menuOpenButton.click() );


//     const menuOpenButton = document.querySelector("#menu-open-button");
// const menuCloseButton = document.querySelector("#menu-close-button");
// const navMenu = document.querySelector(".nav-menu");

// menuOpenButton.addEventListener("click", () => {
//     console.log("Click");
//     navMenu.classList.toggle("show-mobile-menu"); // Toggle the menu visibility
// });

// menuCloseButton.addEventListener("click", () => {
//     navMenu.classList.remove("show-mobile-menu"); // Close the menu when close button is clicked
// });


const navbarLinks = document.querySelectorAll(".nav-link");
const navMenu = document.querySelector(".nav-menu");
const menuOpenButton = document.querySelector("#menu-open-button");
const menuCloseButton = document.querySelector("#menu-close-button");


menuOpenButton.addEventListener("click", ()=>{
    console.log("CLick")
    navMenu.classList.toggle("show-mobile-menu")
    })
    menuCloseButton.addEventListener("click", ()=>
            menuOpenButton.click() );

    navbarLinks.forEach((link) => {
        link.addEventListener("click", () => menuCloseButton.click());
      });


/* Initializing Swiper */
const swiper = new Swiper(".slider-wrapper", {
  loop: true,
  grabCursor: true,
  spaceBetween: 25,

  // Pagination bullets
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    dynamicBullets: true,
  },

  // Navigation arrows
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

   // Autoplay settings
   autoplay: {
    delay: 1600, // 3 seconds delay between slides
    disableOnInteraction: false, // Continue autoplay after user interaction
  },

  /* Responsive breakpoints */
  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    768: {
      slidesPerView: 2,
    },
    1024: {
      slidesPerView: 3,
    },
  },
});