https://bani.africa/panorama-slider/index.js

1import { S as E, P as S, AutoplayModule } from "./vendor.js";
2const $ = function () {
3  const s = document.createElement("link").relList;
4  if (s && s.supports && s.supports("modulepreload")) return;
5  for (const e of document.querySelectorAll('link[rel="modulepreload"]')) r(e);
6  new MutationObserver((e) => {
7    for (const t of e)
8      if (t.type === "childList")
9        for (const n of t.addedNodes)
10          n.tagName === "LINK" && n.rel === "modulepreload" && r(n);
11  }).observe(document, { childList: !0, subtree: !0 });
12  function o(e) {
13    const t = {};
14    return (
15      e.integrity && (t.integrity = e.integrity),
16      e.referrerpolicy && (t.referrerPolicy = e.referrerpolicy),
17      e.crossorigin === "use-credentials"
18        ? (t.credentials = "include")
19        : e.crossorigin === "anonymous"
20        ? (t.credentials = "omit")
21        : (t.credentials = "same-origin"),
22      t
23    );
24  }
25  function r(e) {
26    if (e.ep) return;
27    e.ep = !0;
28    const t = o(e);
29    fetch(e.href, t);
30  }
31};
32$();
33typeof window != "undefined" &&
34  window.SwiperElementRegisterParams &&
35  window.SwiperElementRegisterParams(["panoramaEffect"]);
36function b({ swiper: a, extendParams: s, on: o }) {
37  s({ panoramaEffect: { depth: 200, rotate: 30 } }),
38    o("beforeInit", () => {
39      if (a.params.effect !== "panorama") return;
40      a.classNames.push(`${a.params.containerModifierClass}panorama`),
41        a.classNames.push(`${a.params.containerModifierClass}3d`);
42      const r = { watchSlidesProgress: !0 };
43      Object.assign(a.params, r), Object.assign(a.originalParams, r);
44    }),
45    o("progress", () => {
46      if (a.params.effect !== "panorama") return;
47      const r = a.slidesSizesGrid,
48        { depth: e = 200, rotate: t = 30 } = a.params.panoramaEffect,
49        g = (t * Math.PI) / 180 / 2,
50        h = 1 / (180 / t);
51      for (let i = 0; i < a.slides.length; i += 1) {
52        const d = a.slides[i],
53          P = d.progress,
54          c = r[i],
55          y = a.params.centeredSlides ? 0 : (a.params.slidesPerView - 1) * 0.5,
56          l = P + y,
57          f = 1 - Math.cos(l * h * Math.PI),
58          m = `${l * (c / 3) * f}px`,
59          p = l * t,
60          u = `${((c * 0.5) / Math.sin(g)) * f - e}px`;
61        d.style.transform =
62          a.params.direction === "horizontal"
63            ? `translateX(${m}) translateZ(${u}) rotateY(${p}deg)`
64            : `translateY(${m}) translateZ(${u}) rotateX(${-p}deg)`;
65      }
66    }),
67    o("setTransition", (r, e) => {
68      a.params.effect === "panorama" &&
69        a.slides.forEach((t) => {
70          t.style.transitionDuration = `${e}ms`;
71        });
72    });
73}
74function initPanoramaSlider() {
75  new E(".panorama-slider .swiper", {
76    modules: [S, b, AutoplayModule],
77    effect: "panorama",
78    slidesPerView: 1.5,
79    loop: true,
80    loopAdditionalSlides: 1,
81    centeredSlides: true,
82    grabCursor: true,
83    spaceBetween: -14,
84
85    autoplay: { delay: 3e3 },
86    panoramaEffect: { depth: 150, rotate: 45 },
87    breakpoints: {
88      480: {
89        slidesPerView: 2,
90        spaceBetween: -15,
91        panoramaEffect: { rotate: 35, depth: 150 },
92      },
93      640: {
94        slidesPerView: 2,
95        spaceBetween: -12,
96        panoramaEffect: { rotate: 30, depth: 150 },
97      },
98      1024: {
99        slidesPerView: 3,
100        spaceBetween: -15,
101        panoramaEffect: { rotate: 30, depth: 200 },
102      },
103      1200: {
104        slidesPerView: 3,
105        spaceBetween: -15,
106        panoramaEffect: { rotate: 25, depth: 250 },
107      },
108    },
109  });
110}
111// Assign to global window for later calls
112if (typeof window !== "undefined") {
113  window.initPanoramaSlider = initPanoramaSlider;
114}