TheMallBd/js/app.js

// lightbox
// let gallery =  new SimpleLightbox('.gallery a', {});
// gallery.on('show.simplelightbox', function () {
//   // do something…
// });

// lightbox end








    // product details carousel
    // var galleryThumbs = new Swiper('.gallery-thumbs', {
    //     loop: true,
    //     loopedSlides: 1,
    //     spaceBetween: 10,
    //     slidesPerView: 2,
    //     direction: 'vertical',
    //     // centeredSlides: true,

    //     freeMode: true,
    //     breakpoints: { 
    //         0: { 
    //           direction: 'horizontal', 
    //           spaceBetween: 5,
    //           slidesPerView: 4,
    //           centeredSlides: true,
    //         },
    //         993: { 
    //           direction: 'vertical', 
    //           spaceBetween: 15,
    //           slidesPerView: 4,

    //         }
    //       }
    //   });

    // var galleryTop = new Swiper('.gallery-main', {
    //     loop: true,
    //     spaceBetween: 10,
    //     loopedSlides: 1,
    //     centeredSlides: true,
    //     freeMode: true,
    //     navigation: {
    //       nextEl: '.swiper-button-next',
    //       prevEl: '.swiper-button-prev',
    //     },
    //     thumbs: {
    //       swiper: galleryThumbs,
    //     },
    //   });
    // product details carousel end
  


// fileter sidebar function
          // filter open button
    const filterOpenBtn = document.querySelector("#filter-button");
          // filter close button
    const filterCloseBtn = document.querySelector('.filter-close-btn');

          // filter sidebar container 
    const filterContainer = document.querySelector('.filter');

          // filter open open function
   if (filterOpenBtn && filterContainer) {
    filterOpenBtn.addEventListener("click", () => {
      filterContainer.classList.add("active")
     });
   }
   
          // filter close button
   if (filterContainer && filterCloseBtn) {
    filterCloseBtn.addEventListener("click", () => {
      filterContainer.classList.remove("active")
     });
   }
// fileter sidebar function end






  //  checkout sidebar function 
          // checkout open desktop button
  const checkoutProductBtnDesktop = document.querySelector('.checkout-product-btn-desktop')

          // checkout open mobile button
  const checkoutProductBtnMobile = document.querySelector('.checkout-product-btn-mobile')

          // checkout close button
  const checkoutContainerCloseBtn = document.querySelector('.cross-btn')

          // checkout container
  const checkoutContainer = document.querySelector('.checkout-container')


          // checkout open function for desktop
      if(checkoutProductBtnDesktop && checkoutContainer && filterContainer) {
        checkoutProductBtnDesktop.addEventListener('click', () => {

          // hide fillter sidebar if open
          filterContainer.classList.remove("active")

          // open checkout sidebar
          checkoutContainer.style.display = "block";

        })
      };

              // checkout open function for mobile
      if(checkoutProductBtnMobile && checkoutContainer && filterContainer) {
        checkoutProductBtnMobile.addEventListener('click', () => {
          
          // hide fillter sidebar if open
          filterContainer.classList.remove("active");

          // open checkout sidebar
          checkoutContainer.style.display = "block";
        })
      };

              // checkout close function
      if(checkoutContainerCloseBtn && checkoutContainer) {
        checkoutContainerCloseBtn.addEventListener('click', () => {
          checkoutContainer.style.display = "none"
        })
      }
  //  checkout sidebar function end


   




// all carousel

    // homepage hero banner slider home page
    const bannerSlider = new Swiper(".bannerSlider", {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      }
    });


    // category slider home page
      const categorySlider = new Swiper('.categorySlider', {
        loop: false,
        slidesPerView: 5,
        spaceBetween: 30,
        loopedSlides: 1,
        breakpoints: { 
          0: { 
            slidesPerView: 3,
          },
          576: { 
            slidesPerView: 4,
          },
          993: { 
            slidesPerView: 5,

          }
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });


      // Feture brand slider  home page
      const featuredBrands = new Swiper('.featuredBrands', {
        loop: false,
        slidesPerView: 4,
        spaceBetween: 30,
        loopedSlides: 1,
        navigation: false,
        breakpoints: { 
          0: { 
            slidesPerView: 2,
          },
          576: { 
            slidesPerView: 3,
          },
          993: { 
            slidesPerView: 5,

          }
        },
      });


      // Feture brand slider  home page
      const trendingStories = new Swiper('.trendingStories', {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 30,
        loopedSlides: 1,
        navigation: false,
        breakpoints: { 
          0: { 
            slidesPerView: 1,
          },
          576: { 
            slidesPerView: 2,
          },
          993: { 
            slidesPerView: 3,

          }
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });



      // all product nav slider brand slider all product page
      const allProductNav = new Swiper('.all-product-nav-slider', {
        loop: false,
        slidesPerView: 8,
        spaceBetween: 8,
        loopedSlides: 1,
        navigation: false
      });




      // // product details page carousel

          // thumb carousel
          var productThumb = new Swiper('.productThumb', {
            loop: true,
            loopedSlides: 1,
            spaceBetween: 10,
            slidesPerView: 2,
            direction: 'vertical',

            freeMode: true,
            breakpoints: { 
                0: { 
                  direction: 'horizontal', 
                  spaceBetween: 15,
                  slidesPerView: 4,
                  centeredSlides: true,
                },
                993: { 
                  direction: 'vertical', 
                  spaceBetween: 15,
                  slidesPerView: 3,

                }
              }
          });

          // productSlider carousel
          var productSlider = new Swiper('.productSlider', {
                loop: true,
                spaceBetween: 10,
                loopedSlides: 1,
                centeredSlides: true,
                freeMode: true,
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                  disabledClass: 'disabled_swiper_button'
                },
                thumbs: {
                  swiper: productThumb,
                },
            });

// all carousel end








// simple light box

  
  let gallery =  new SimpleLightbox('.gallery a', {});

  if(gallery) {
    gallery.on('show.simplelightbox', function () {
        // do something…
    });
  }