БЛОГ НА HUSL


Fancyapps не работает

Автор вопроса: Michel Migalov

Пытаюсь запустить слайдер с помощью плагина Fancyapps через CDN. Через npm не вариант, backend мне не доступен. https://codepen.io/migal4/pen/jOJvqgr - то, что у меня сейчас.

const productCarousel = new Carousel(
        document.getElementById('productCarousel'),
        {
            transition: 'slide',
            preload: 3, // Smoother navigation when using lazy loaded images

            Dots: false,
            Thumbs: {
            type: 'classic',
            Carousel: {
                dragFree: false,
                slidesPerPage: 'auto',
                Navigation: true,

                axis: 'x',
                breakpoints: {
                '(min-width: 768px)': {
                    axis: 'y',
                },
                },
            },
            },
        },
        { Thumbs }
        );

        Fancybox.bind('[data-fancybox="gallery"]', {
        compact: false,
        idle: false,
        dragToClose: false,
        contentClick: () =>
            window.matchMedia('(max-width: 578px), (max-height: 578px)').matches
            ? 'toggleMax'
            : 'toggleCover',

        animated: false,
        showClass: false,
        hideClass: false,

        Hash: false,
        Thumbs: false,

        Toolbar: {
            display: {
            left: [],
            middle: [],
            right: ['close'],
            },
        },

        Carousel: {
            transition: 'fadeFast',
            preload: 3,
        },

        Images: {
            zoom: false,
            Panzoom: {
            panMode: 'mousemove',
            mouseMoveFactor: 1.1,
            },
        },
        });

https://stackblitz.com/edit/js-8zg2gb?file=index.html,index.js,style.css - то, что я хочу получить. Код один в один одинаковый, но результат отличается. Как заставить слайдер заработать?


Источник

Ответы (1 шт):

Автор решения: Daniil Loban

Вставлю ответ целиком html чтобы было видно что он рабочий. Основное решение было в том чтобы найти и подключить все нужные скрипты и стили, и еще оказалось нужен tailwind который я тоже подключил. После этого вставил кастомные стили, разметку и js код для инициализации.

(открывать на всю страницу)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src=" https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.min.js "></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel/carousel.css"/>
  <link href=" https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.min.css " rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel/carousel.thumbs.css"/>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel/carousel.thumbs.umd.js"></script>
  <style type="text/css">
    #productContainer {
      --product-view-height: 680px;
    }

    #productContainer .f-thumbs.is-classic.is-vertical {
      height: var(--product-view-height, 100%);
    }

    /*
      Thumbnails
    */

    .f-thumbs.is-classic {
      --f-thumb-width: 90px;
      --f-thumb-height: 135px;

      --f-thumb-gap: 0.5rem;

      --f-thumb-opacity: 1;
      --f-thumb-selected-opacity: 0.2;

      --f-button-color: #0d0c22;
      --f-button-hover-color: #ff3520;

      --f-button-bg: #fff;
      --f-button-hover-bg: #fff;
      --f-button-active-bg: #fff;
    }

    .f-thumbs.is-classic .f-thumbs__slide__img {
      object-fit: contain;
    }

    .f-thumbs.is-classic .f-carousel__nav .f-button[disabled] {
      display: none;
    }

    /*
      Main carousel
    */
    #productCarousel {
      --f-carousel-spacing: 0;

      --f-button-width: 48px;
      --f-button-height: 48px;
      --f-button-border-radius: 0;

      --f-button-color: #0d0c22;
      --f-button-hover-color: #ff3520;

      --f-button-bg: #fff;
      --f-button-hover-bg: #fff;
      --f-button-active-bg: #fff;

      --f-button-svg-width: 28px;
      --f-button-svg-height: 28px;

      --f-button-svg-stroke-width: 1;
      --f-button-svg-filter: none;

      height: var(--product-view-height);
    }

    #productCarousel .f-carousel__slide {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    #productCarousel .f-carousel__slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #productCarousel .f-carousel__nav {
      opacity: 0;
      transition: opacity 0.15s;
    }

    @media (hover: hover) {
      #productCarousel:hover .f-carousel__nav {
        opacity: 1;
      }
    }

    /*
      Fancybox
    */

    .fancybox__container {
      --fancybox-color: #0d0c22;
      --fancybox-bg: #fff;
      --f-spinner-color-1: rgba(0, 0, 0, 0.1);
      --f-spinner-color-2: rgba(17, 24, 28, 0.8);
    }

    .fancybox__toolbar,
    .fancybox__nav {
      --f-button-width: 60px;
      --f-button-height: 60px;
      --f-button-border-radius: 0;

      --f-button-color: #0d0c22;
      --f-button-hover-color: #ff3520;

      --f-button-bg: #fff;
      --f-button-hover-bg: #fff;
      --f-button-active-bg: #fff;

      --f-button-svg-width: 32px;
      --f-button-svg-height: 32px;

      --f-button-svg-stroke-width: 1;
      --f-button-svg-filter: none;
    }

    .fancybox__nav {
      --f-button-next-pos: 0;
      --f-button-prev-pos: 0;
    }
  </style>

  <div id="app" class="p-4">
    <h1 class="mb-2 md:mb-4 font-semibold text-xl">
      Responsive Carousel Thumbnails
    </h1>
    <p class="mb-4 md:hidden">
      <a
        href="https://js-8zg2gb.stackblitz.io"
        target="_blank"
        class="underline underline-offset-2"
        >View this demo in full size</a
      >
    </p>
    <div
      id="productContainer"
      class="
        mb-14
        md:max-w-lg
        grid
        gap-2
        md:grid-cols-[106px_minmax(0px,_1fr)]
      "
    >
    <div id="productCarousel" class="f-carousel md:order-last">
      <div
        class="f-carousel__slide"
        data-thumb-src="https://fancyapps.com/img/dress_1_s.jpg"
        data-fancybox="gallery"
        data-src="https://fancyapps.com/img/dress_1_b.jpg"
      >
        <img
          alt=""
          data-lazy-src="https://fancyapps.com/img/dress_1_m.jpg"
        />
      </div>
      <div
        class="f-carousel__slide"
        data-thumb-src="https://fancyapps.com/img/dress_2_s.jpg"
        data-fancybox="gallery"
        data-src="https://fancyapps.com/img/dress_2_b.jpg"
      >
        <img
          alt=""
          data-lazy-src="https://fancyapps.com/img/dress_2_m.jpg"
        />
      </div>
      <div
        class="f-carousel__slide"
        data-thumb-src="https://fancyapps.com/img/dress_3_s.jpg"
        data-fancybox="gallery"
        data-src="https://fancyapps.com/img/dress_3_b.jpg"
      >
        <img
          alt=""
          data-lazy-src="https://fancyapps.com/img/dress_3_m.jpg"
        />
      </div>
      <div
        class="f-carousel__slide"
        data-thumb-src="https://fancyapps.com/img/dress_4_s.jpg"
        data-fancybox="gallery"
        data-src="https://fancyapps.com/img/dress_4_b.jpg"
      >
        <img
          alt=""
          data-lazy-src="https://fancyapps.com/img/dress_4_m.jpg"
        />
      </div>
      <div
        class="f-carousel__slide"
        data-thumb-src="https://fancyapps.com/img/dress_5_s.jpg"
        data-fancybox="gallery"
        data-src="https://fancyapps.com/img/dress_5_b.jpg"
      >
        <img
          alt=""
          data-lazy-src="https://fancyapps.com/img/dress_5_m.jpg"
        />
      </div>
      <div
        class="f-carousel__slide"
        data-thumb-src="https://fancyapps.com/img/dress_6_s.jpg"
        data-fancybox="gallery"
        data-src="https://fancyapps.com/img/dress_6_b.jpg"
      >
        <img
          alt=""
          data-lazy-src="https://fancyapps.com/img/dress_6_m.jpg"
        />
      </div>
    </div>
  </div>

  <p>
    <a
      href="https://fancyapps.com/"
      target="_blank"
      class="underline underline-offset-2"
      >fancyapps.com</a
    >
  </p>
</div>

  <script type="text/javascript">
    const productCarousel = new Carousel(
      document.getElementById('productCarousel'),
      {
        transition: 'slide',
        preload: 3, // Smoother navigation when using lazy loaded images

        Dots: false,
        Thumbs: {
          type: 'classic',
          Carousel: {
            dragFree: false,
            slidesPerPage: 'auto',
            Navigation: true,

            axis: 'x',
            breakpoints: {
              '(min-width: 768px)': {
                axis: 'y',
              },
            },
          },
        },
      },
      { Thumbs }
    );

    Fancybox.bind('[data-fancybox="gallery"]', {
      compact: false,
      idle: false,
      dragToClose: false,
      contentClick: () =>
        window.matchMedia('(max-width: 578px), (max-height: 578px)').matches
          ? 'toggleMax'
          : 'toggleCover',

      animated: false,
      showClass: false,
      hideClass: false,

      Hash: false,
      Thumbs: false,

      Toolbar: {
        display: {
          left: [],
          middle: [],
          right: ['close'],
        },
      },

      Carousel: {
        transition: 'fadeFast',
        preload: 3,
      },

      Images: {
        zoom: false,
        Panzoom: {
          panMode: 'mousemove',
          mouseMoveFactor: 1.1,
        },
      },
    });
  </script>
</body>
</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.