TERMINAL FM // js

EDITOR
/home/u917864144/domains/humsafarholiday.com/public_html/assets/js/slider.js
/*--------------------------------------------------------------------------------------
    Template Name: WizardSlides - Ultimate Slider Collection with HTML, CSS, Tailwind, JS
    Author: MKTemplateWizard
    Version: 1.0.0
    

    TABLE OF CONTENT
----------------------------------------------------------------------------------------
========================================================================================
    1. Create a Swiper instance
    2. Hero Slider One
    3. Hero Slider Two
    4. Hero Slider Three
    5. Hero Slider Four
    6. Project Slider One
    7. Portfolio Slider One
    8. Product Slider One
    9. Product Slider Two
    10. Product Slider Three
    11. Product Slider Four
    12. Testimonial Slider One
    13. Testimonial Slider Two
    14. Testimonial Slider Three
    15. Testimonial Slider Four
    16. Testimonial Slider Five
    17. Testimonial Slider Six
    18. Testimonial Slider Seven
    19. Team Slider One
    20. Team Slider Two
    21. Team Slider Three
    22. Team Slider Four
----------------------------------------------------------------------------------------*/

"use strict";
/*  ================================================== SWIPER SLIDERS ===================================================*/
//============================== Create a Swiper instance =============================
function initializeSwiper(containerClass, options, disableAutoplay) {
  return new Swiper(containerClass, {
    loop: true,
    slidesPerView: 1,
    spaceBetween: 20,
    ...options,
    autoplay: disableAutoplay
      ? false
      : {
          delay: 5000,
          disableOnInteraction: false,
        },
    navigation: {
      nextEl: `${containerClass}-next`,
      prevEl: `${containerClass}-prev`,
    },
    keyboard: {
      enabled: true,
      onlyInViewport: true,
    },
    speed: 1000,
  });
}

//============================ HERO SLIDER ONE =============================
const heroSliderOne = initializeSwiper(".hero-slider-one", {
  effect: "creative",
  creativeEffect: {
    prev: {
      translate: ["-80%", 0, 0],
    },
    next: {
      translate: ["100%", 0, 0],
    },
  },
});

//============================ HERO SLIDER TWO =============================
const heroSliderTwo = initializeSwiper(
  ".hero-slider-two",
  {
    slidesPerView: 1,
    loopedSlides: 6,
    mousewheel: {
      thresholdDelta: 70,
    },
    noSwiping: true,
    noSwipingClass: "swiper-slide",
    centeredSlides: false,

    pagination: {
      el: ".hero-slider-two-pagination",
      clickable: true,
    },
  },
  true
);

const heroSliderTwoThumb = initializeSwiper(
  ".hero-slider-two-thumb",
  {
    slidesPerView: "auto",
    spaceBetween: 10,
    slideToClickedSlide: true,
  },
  true
);

heroSliderTwo.controller.control = heroSliderTwoThumb;
heroSliderTwoThumb.controller.control = heroSliderTwo;

//============================ HERO SLIDER THREE =============================
const heroSliderThree = initializeSwiper(".hero-slider-three", {
  grabCursor: true,
  effect: "fade",
  pagination: {
    el: ".hero-slider-three-pagination",
    clickable: true,
  },
});

//============================ HERO SLIDER FOUR =============================
const heroSliderfour = initializeSwiper(".hero-slider-four", {
  effect: "creative",
  creativeEffect: {
    prev: {
      translate: ["-80%", 0, 0],
    },
    next: {
      translate: ["100%", 0, 0],
    },
  },

  pagination: {
    el: ".hero-slider-four-pagination",
    clickable: true,
    dynamicBullets: true,
  },
});

//============================ PROJECT SLIDER ONE =============================
const projectOneSlider = initializeSwiper(".project-one-slider", {
  spaceBetween: 30,
  breakpoints: {
    1500: { slidesPerView: 1.7 },
    600: { slidesPerView: 1.5 },
  },
});

//============================ PORTFOLIO SLIDER ONE =============================
const portfolioOneSlider = initializeSwiper(".portfolio-one-slider", {
  breakpoints: {
    1100: {
      slidesPerView: 3,
    },
    600: {
      slidesPerView: 2,
    },
  },
});

//============================ PRODUCT SLIDER ONE =============================
const productOneSlider = initializeSwiper(".product-slider-one", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 100,
    modifier: 2.5,
  },
  pagination: {
    el: ".product-slider-one-pagination",
    clickable: true,
  },
});

//============================ PRODUCT SLIDER TWO =============================
const productTwoSlider = initializeSwiper(".product-slider-two", {
  breakpoints: {
    1100: {
      slidesPerView: 3,
    },
    600: {
      slidesPerView: 2,
    },
  },
  grabCursor: true,
});

//============================ PRODUCT SLIDER THREE =============================
const productThreeSlider = initializeSwiper(".product-slider-three", {
  breakpoints: {
    1100: {
      slidesPerView: 3,
    },
    600: {
      slidesPerView: 2,
    },
  },
  grabCursor: true,
});

//============================ PRODUCT SLIDER FOUR =============================
const productFourSlider = initializeSwiper(".product-slider-four", {
  breakpoints: {
    1100: {
      slidesPerView: 3,
    },
    600: {
      slidesPerView: 2,
    },
  },
  grabCursor: true,
});

//============================ TESTIMONIAL SLIDER ONE =============================
const testimonialSliderOne = initializeSwiper(".testimonial-slider-one");

//============================ TESTIMONIAL SLIDER TWO =============================
const testimonialSliderTwo = initializeSwiper(".testimonial-slider-two");

//============================ TESTIMONIAL SLIDER THREE =============================
const testimonialThreeSlider = initializeSwiper(".testimonial-slider-three", {
  spaceBetween: 30,
  breakpoints: {
    1280: { slidesPerView: 1.7 },
    1024: { slidesPerView: 1.2 },
  },
});

//============================ TESTIMONIAL SLIDER FOUR =============================
const testimonialFourSlider = initializeSwiper(".testimonial-slider-four", {
  grabCursor: true,
  effect: "creative",
  creativeEffect: {
    prev: {
      shadow: true,
      translate: ["-120%", 0, -500],
    },
    next: {
      shadow: true,
      translate: ["120%", 0, -500],
    },
  },
});

//============================ TESTIMONIAL SLIDER FIVE =============================
const testimonialFiveSlider = initializeSwiper(".testimonial-slider-five", {
  grabCursor: true,

  breakpoints: {
    640: {
      slidesPerView: 2,
    },
  },
});

//============================ TESTIMONIAL SLIDER SIX =============================
const testimonialSixSlider = initializeSwiper(".testimonial-slider-six", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 300,
    modifier: 1,
    slideShadows: false,
  },
});

//============================ TESTIMONIAL SLIDER SEVEN =============================
const testimonialSevenSlider = initializeSwiper(".testimonial-slider-seven", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,

  breakpoints: {
    1024: {
      slidesPerView: 1.8,
      spaceBetween: 70,
    },

    640: {
      slidesPerView: 1.2,
      spaceBetween: 50,
    },
  },

  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: false,
  },

  pagination: {
    el: ".testimonial-slider-seven-pagination",
    clickable: true,
  },
});

//============================ TEAM SLIDER ONE =============================
const teamOneSlider = initializeSwiper(".team-slider-one", {
  slidesPerGroup: 1,
  breakpoints: {
    1100: {
      slidesPerView: 3,
      slidesPerGroup: 3,
    },
    600: {
      slidesPerView: 2,
      slidesPerGroup: 2,
    },
  },
});

//============================ TEAM SLIDER TWO =============================
const teamTwoSlider = initializeSwiper(".team-slider-two", {
  breakpoints: {
    1024: {
      slidesPerView: 3,
    },
    640: {
      slidesPerView: 2,
    },
  },
  allowTouchMove: true,
  centeredSlides: true,
  slideToClickedSlide: true,
  effect: "coverflow",
  grabCursor: true,
  autoplay: false,
  navigation: {
    nextEl: ".team-slider-two-next",
    prevEl: ".team-slider-two-prev",
  },
  coverflow: {
    rotate: 0,
    stretch: 100,
    depth: 200,
    modifier: 1,
    slideShadows: false,
  },
});

//============================ TEAM SLIDER THREE =============================
const teamThreeSlider = initializeSwiper(".team-slider-three", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",

  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 250,
    modifier: 1,
    slideShadows: false,
  },
  pagination: {
    el: ".team-slider-three-pagination",
    clickable: true,
    dynamicBullets: true,
  },
});

//============================ TEAM SLIDER FOUR =============================
const teamFourSlider = initializeSwiper(".team-slider-four", {
  breakpoints: {
    1100: {
      slidesPerView: 3,
    },
    600: {
      slidesPerView: 2,
    },
  },
  grabCursor: true,
});
Ln 1, Col 1
ONLINE
26 items
10:57:29