How to use the swiper/dist/js/swiper.min 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 SharePoint / sp-dev-fx-webparts / samples / react-slide-swiper / src / webparts / reactSlideSwiper / components / ReactSlideSwiper.tsx View on Github external
options.navigation = {
        nextEl: `.next-${this.uniqueId}`,
        prevEl: `.prev-${this.uniqueId}`,
      };
    }

    if (opts.enableAutoplay) {

      options.autoplay = {
        delay: opts.delayAutoplay,
        disableOnInteraction: opts.disableAutoplayOnInteraction,
      };
    }

    // tslint:disable-next-line:no-unused-expression
    new Swiper(`.container-${this.uniqueId}`, options);
  }
}
github fa-ge / Scrollload / src / complex-demos / swiper-tab / index.js View on Github external
$(sl.contentDom).prepend(getData(data))

                        // 处理完业务逻辑后必须要调用refreshComplete
                        sl.refreshComplete()
                    },
                })
            },
        })
    )
})
/**
 * 这里要说明我虽然用的swiper插件来实现左右滑动的效果。但是你完全可以用其他的小一点的。
 * 我用这个插件主要是很多人比较熟悉这个插件
 *
 */
const mySwiper = new Swiper('.swiper-container', {
    onSlideChangeStart: function(swiper) {
        scrollloads.forEach((scrollload, index) => {
            index === swiper.activeIndex ? scrollload.unLock() : scrollload.lock()
        })
    },
})
github Yancey-Blog / BLOG_FE / src / containers / About / About.tsx View on Github external
public handleSwiper() {
    // tslint:disable-next-line:no-unused-expression
    new Swiper('.swiper-container', {
      direction: 'vertical',
      loop: false,
      speed: 1600,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet(index: any, className: any) {
          const year = document
            .querySelectorAll('.swiper-slide')
            [index].getAttribute('data-year');
          return `<span class="${className}">${year}</span>`;
        },
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
github Yancey-Blog / BLOG_FE / src / containers / About / About.js View on Github external
handleSwiper() {
    const timelineSwiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      loop: false,
      speed: 1600,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet(index, className) {
          const year = document.querySelectorAll('.swiper-slide')[index].getAttribute('data-year');
          return `<span class="${className}">${year}</span>`;
        },
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      breakpoints: {
github topnotch48 / react-swiper / src / react-swiper.js View on Github external
var content = (
            <div>
                <div>
                    { children }
                </div>
                { pagination }
                { btnNext }
                { btnPrev }
                { scrollBar }
            </div>
        );

        container.innerHTML = ReactDomServer.renderToStaticMarkup(content);

        return new Swiper(container.children[0], config);
    },