How to use the 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 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 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 mai-kuraki / fluentApp / ui / js / compoments / search.js View on Github external
componentDidMount() {
        this.mySwiper = new Swiper('.search-tab-wrapper', {
            allowTouchMove: false,
            on:{
                transitionEnd: () => {
                    this.setState({
                        activeTab: this.mySwiper.activeIndex
                    });
                },
            },
        });
    }
github Topthinking / parcel-react / src / components / swiper / demo1.js View on Github external
}
                            }
                        })

                    } else {
                        progressed = true
                    }
                    lastProgress = progress
                },
            }
        })

        this.Swiper1.controller.control = this.Swiper2;//Swiper1控制Swiper2,需要在Swiper2初始化后
        this.Swiper2.controller.control = this.Swiper1;//Swiper2控制Swiper1,需要在Swiper1初始化后

        var Swiper3 = new Swiper('#swiper-container3', {
            controller: {
                control: [self.Swiper1, self.Swiper2],//控制前面两个Swiper
            },
        })
    }
github Topthinking / parcel-react / src / components / swiper / demo2.js View on Github external
componentDidMount() {
        const self = this
        let lastProgress = 0, progressed = false
        this.Swiper = new Swiper('#swiper-container2', {
            watchSlidesProgress: true,
            initialSlide: self.state.active,
            pagination: {
                el: '.swiper-pagination',
                type: 'custom',
                clickable: true
            },
            nested:true,
            scrollbar: {
                el: '.swiper-scrollbar',
                hide: true,
            },
            effect: 'cube',
            grabCursor: true,
            cubeEffect: {
              shadow: true,
github iondrimba / react-weather-app / src / app / Home / index.js View on Github external
componentDidMount() {
    this.forecasts = [...document.querySelectorAll('.forecasts__period')];

    this.swiper = new Swiper('.swiper-container', {
      direction: 'horizontal',
      loop: false
    });

    this.swiper.on('slideChangeTransitionEnd', () => {
      this.setState({ currentForecast: this.state.forecastIndex[this.swiper.activeIndex] });
    });
  }
github flyntwp / flynt / Components / GridPostsSlider / script.js View on Github external
1440: {
          slidesPerView: 5
        },
        1920: {
          slidesPerView: 6
        }
      }
    }

    if (options.autoplay && options.autoplaySpeed) {
      config['autoplay'] = {
        delay: options.autoplaySpeed
      }
    }

    this.swiper = new Swiper(this.$slider, config)
  }
}
github apache / incubator-dlab / src / js / init.js View on Github external
$(document).ready(function () {
    'use strict';

    macSwiper = new Swiper('.mac-wrap .swiper-container', {
        lazyLoadingInPrevNext: true,
        preloadImages: true,
        lazyLoading: true,
        speed: 400,
        on: {
            init: function () {
                var self = this;
                macNavigation.on('click', 'mark', function () {
                    self.slideTo($(this).data('slide'));
                    return false;
                });
            },
        },
    });

    macSwiper.on('slideChange', function () {
github kidjp85 / react-id-swiper / src / ReactIdSwiper.tsx View on Github external
const buildSwiper = () => {
    if (swiperNodeRef.current && swiperInstanceRef.current === null) {
      swiperInstanceRef.current = new Swiper(swiperNodeRef.current, objectAssign({}, props));
    }
  };