How to use the swiper/dist/js/swiper.esm.Swiper function in swiper

To help you get started, we’ve selected a few swiper examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github canonical-web-and-design / snapcraft.io / static / js / public / snap-details / screenshots.js View on Github external
// https://github.com/nolimits4web/swiper/issues/2218
    // Hack https://github.com/nolimits4web/swiper/issues/2218#issuecomment-388837042
    // TODO: When the issue linked above is fixed, remove this
    on: {
      init() {
        setTimeout(() => {
          window.dispatchEvent(new Event("resize"));
        }, 200);
      }
    }
  });

  // We need to resize the iframe on window resize
  iframeSize(".js-video-slide");

  new Swiper(screenshotsEl.querySelector(".swiper-container"), config);
}
github canonical-web-and-design / snapcraft.io / static / js / public / store-categories.js View on Github external
const writeCategory = function(response) {
    holder.innerHTML = response;
    new Swiper(
      holder.querySelector(".swiper-container"),
      Object.assign(
        {
          navigation: {
            nextEl: `.swiper-button__next--${category}`,
            prevEl: `.swiper-button__prev--${category}`
          }
        },
        CATEGORY_CONFIG
      )
    );
  };
github canonical-web-and-design / snapcraft.io / static / js / public / store-categories.js View on Github external
function storeCategories() {
  const holders = document.querySelectorAll(".js-store-category");

  for (let i = 0; i < holders.length; i++) {
    getCategory(holders[i]);
  }

  new Swiper(
    document.querySelector("#js-snap-carousel-featured"),
    Object.assign(
      {
        navigation: {
          nextEl: `.swiper-button__next--featured`,
          prevEl: `.swiper-button__prev--featured`
        }
      },
      CATEGORY_CONFIG
    )
  );
}