How to use swiper - 10 common examples

Template.main.onRendered(function() {
    var mySwiper = new Swiper ('.swiper-container', {
        // Optional parameters
        direction: 'horizontal',
        loop: false,
        slidesPerView: "auto",
        noSwiping: true,
        noSwipingClass: "no-swipe",

        // Navigation arrows
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        }
    })

    console.log(SANCT);

// 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);
}

mounted () {
    const self = this
    const el = '#' + this.id
    const direction = this.direction

    // Initialize Swiper
    const swiper = new Swiper(el, {
      initialSlide: this.direction === 'left' ? 0 : 1,
      resistanceRatio: 0,
      speed: 150
    })

    // Event will be fired after transition
    swiper.on('transitionEnd', function () {
      const activeIndex = this.activeIndex
      if ((direction === 'right' && activeIndex === 0) || (direction === 'left' && activeIndex === 1)) {
        self.$emit('transitionEnd')
        // Destroy slider instance and detach all events listeners
        this.destroy()
      }
    })
  }
}

var self = this;
                macNavigation.on('click', 'mark', function () {
                    self.slideTo($(this).data('slide'));
                    return false;
                });
            },
        },
    });

    macSwiper.on('slideChange', function () {
        $('mark').removeClass('is-current-slide');
        $('[data-slide="' + this.activeIndex + '"]', macNavigation).addClass('is-current-slide');
        stopMacVideos();
    });

    screenSliderTop = new Swiper('.screen-slider-top', {
        navigation: {
            nextEl: '.screen-slider-top .swiper-button-next',
            prevEl: '.screen-slider-top .swiper-button-prev',
        },
        // autoHeight: true,
        height:550,
    });

    screenSliderTop.on('slideChange', function () {
        $('div', screenThumbsNavigation).removeClass('swiper-slide-active');
        $('[data-slide="' + this.activeIndex + '"]', screenThumbsNavigation).addClass('swiper-slide-active');
    });

    $(this).on('resize', function () {
        if (screen('width') > 767) {
            screenSliderTop.onlyExternal = true;

this.$nextTick(() => {
            // 3.深度监视watch监视homecasual是否完全加载，是的话在创建swiper实例
          new Swiper('.swiper-container', {
            autoplay: true,//自动轮播
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            }
          })
        });
      }

useEffect(() => {
    new Swiper('.swiper-container', {
      loop: true, // 循环模式选项
      autoplay: {
        disableOnInteraction: false
      }
    })
  })
  return (

blcokShowStart=0,//将要展示的区块范围--开始值
        blcokShowEnd=blockheight;//将要展示的区块范围--结束值
    this.dom="swiper-container"+new Date().getTime();
    let bw=`<div class="swiper-container ${this.dom}">
              <div class="swiper-wrapper"></div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>`;
    $('#blockswiper').html(bw);
    // 处理显示方式
    if(blockNew&gt;blockheight){
      blockNew=blockheight;
    }
    blcokShowStart= (blockNew-blcokInterval)&gt;0 &amp;&amp; (blockNew-blcokInterval) || 0;
    blcokShowEnd= (blcokShowStart+2*blcokInterval)&lt;=blcokShowEnd &amp;&amp; (blcokShowStart+2*blcokInterval) || blcokShowEnd;
    this.blockSwiper = new Swiper("."+this.dom, {
      slidesPerView:parseInt(document.body.clientWidth/250),
      slidesPerGroup: parseInt(document.body.clientWidth/250),
      mousewheel: true,
      virtual: {
        slides: (function () {
          var slides = [];
          for (var i = blcokShowStart; i &lt;= blcokShowEnd; i++) {
            slides.push(i);
          }
          return slides;
        }()),
        cache: false,
        renderSlide:(slide, index)=&gt;{
          return `<div data-con="${slide}" class="swiper-slide"> 
                    <div class="${styles.blockSwiper} ${styles.blockHeight} ${styles.dark} bg">
                      <p class="${styles.blockHeightTitle}"> 区块高度</p></div></div>

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);
  }
}

$(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()
        })
    },
})

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',