How to use swiper - 10 common examples

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 pipeos-one / pipeline-meteor / imports / client / templates / main / main.js View on Github external
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);
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 venveo / craft-boilerplate / src / resources / assets / js / components / global / swiper / blockquotes / index.js View on Github external
// See: https://idangero.us/swiper/api/#custom-build
import { Swiper, Keyboard, Navigation, Pagination, Controller, History, Autoplay, EffectFade, EffectCube, EffectFlip, EffectCoverflow, Lazy, A11y } from 'swiper/dist/js/swiper.esm'
// Use modules
Swiper.use([ Keyboard, Navigation, Pagination, Controller, History, Autoplay, EffectFade, EffectCube, EffectFlip, EffectCoverflow, Lazy, A11y ])

function init(){
    if (document.querySelector('[data-swiper-blockquote]') ) {
        new Swiper('[data-swiper-blockquote]', {
            autoplay: {
                delay: 5000,
            },
            speed: 500,
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
        })
    }
}
github davidgaroro / vuetify-swipeout / src / components / SwipeoutItem.vue View on Github external
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()
      }
    })
  }
}
github apache / incubator-dlab / src / js / init.js View on Github external
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;
github Umbrella001 / pdd / src / pages / Home / children / Hot / Hot.vue View on Github external
this.$nextTick(() => {
            // 3.深度监视watch监视homecasual是否完全加载,是的话在创建swiper实例
          new Swiper('.swiper-container', {
            autoplay: true,//自动轮播
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            }
          })
        });
      }
github SusieChang / react-app / src / components / Slides / index.js View on Github external
useEffect(() => {
    new Swiper('.swiper-container', {
      loop: true, // 循环模式选项
      autoplay: {
        disableOnInteraction: false
      }
    })
  })
  return (
github blockchain-jd-com / explorer / data-explorer / src / web / pages / block / block.js View on Github external
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>blockheight){
      blockNew=blockheight;
    }
    blcokShowStart= (blockNew-blcokInterval)>0 && (blockNew-blcokInterval) || 0;
    blcokShowEnd= (blcokShowStart+2*blcokInterval)<=blcokShowEnd && (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 <= blcokShowEnd; i++) {
            slides.push(i);
          }
          return slides;
        }()),
        cache: false,
        renderSlide:(slide, index)=>{
          return `<div class="swiper-slide" data-con="${slide}""> 
                    <div class="${styles.blockSwiper} ${styles.blockHeight} ${styles.dark} bg">
                      <p class="${styles.blockHeightTitle}"> 区块高度</p>
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()
        })
    },
})