Swiper Package Usage - Sitetheory/stratus GitHub Wiki

Home / Packages / Swiper

Table of Contents

Swiper Widget Usage

We recommend appending `data-` to any Stratus HTML data attributes to be most compatible with all browsers. e.g.: ng-model='model' could be written as data-ng-model='model'. For shorthand and readability sake, we will omit appending this from data attributes in this informational.

All widgets are actively under heavy development and options/usages are subject to possible changes.

Stratus' Swiper Carousel was built with Swiper. There can be additional details found in the Swiper Api documentation if it is not found here.

Carousel 

<stratus-swiper-carousel
   data-slides='["https://foo.com/image1","https://foo.com/image2","https://foo.com/image3"]'
></stratus-swiper-carousel>
<stratus-swiper-carousel
   init-now="model.completed"
   data-slides="images"
   autoplay="true"
   pagination="numberBullet"
></stratus-swiper-carousel>

Widget Parameters

Widget Parameters
Parameter Type Default Description
slides json A json array of strings or objects. With a array of strings, supplying image URLs will load a list of images in the carousel. For detailed information on an array of objects see SlideImage below.
  • Strings: Array of URLS to an image, e.g. ["https://domain.com/image1.jpg",]
  • Objects: Array of standard Slide Objects (see SlideImage), e.g. [{src: "https://domain.com/image1", link:"http://domain.com/foo"}]
loop boolean true During pagination, allows a the last slide to return to the very first slide.
autoplay boolean
json 		false Automatically changes the slide at set time intervals.
  • json:
    • TODO: specify format for options of object, time (seconds or milliseconds?)
transition-effect string 'slide' Sets the transition effect of pagination. i.e.: Changing to different slides.
Options: 'slide','fade,'cube,'coverflow','flip'
  • TODO: Some transitions seem to have trouble with lazyLoad that we'll need to work on
pagination boolean
string
json 		false Set how the pagination display is rendered for this carousel, if any. Setting to false (default) displays no pagination.
  • boolean: true will deault to bullet pagination. false will disable pagination display
  • string: 'fraction', 'progressbar', 'progressbarOpposite', 'numberBullet', 'bullet'
  • json: TODO (move to another section)
    • clickable (boolean - default: false)
    • dynamicBullets (boolean - default: false)
    • dynamicMainBullets (integer - default: 1)
    • render (String): 'fraction', 'customFaction' (not complete), 'progressbar', 'progressbarOpposite', 'numberBullet', 'bullet'
init-now reference Specify a variable to watch. Delays initialization until provided variable exists/if not empty.
Useful for slideshows in which the slide data may not be available to render until after the page loads. Once `init-now` expresses true, the widget will attempt to initialize and use the provided slides.
slides-link-target string '_self' If `slides` parameter doesn't have a browser target, uses this option as its default instead of '_self'.
direction 'horizontal'
'vertical' 		'horizontal' Determine direction of slide movement.
round-lengths boolean true Set to true to round values of slides width and height to prevent blurry texts on usual resolution screens (if you have such)
scale-height boolean true Scales an image 'out' if it is too big for a the containing element to match to fit. Also centers all images that don't fit perfectly
allow-zoom boolean false Allow Zooming into an image by double clicking or pinching on Mobile. Requires and force enabled scaleHeight
stretch-width boolean false Allow image to stretch wider than the image provided to fill the element. May cause expected blurriness
auto-height boolean false Resizes the entire element to match the height of the current slide.
WARNING: May cause resizing of this part of the page every time slide changes!
allow-touch-move boolean true Allow moving the slides using a finger or mouse on slides directly (click/tap and drag)
lazy-load boolean
json 		true Enables Lazy Loading to prevent everything from being fetched at once. This will lazy-load images only for the next and previous images to give a buffer.=

SlideImage 

 TODO

Examples 

 TODO
⚠️ **GitHub.com Fallback** ⚠️