Skip to content

Karnith/angular-revolution

Repository files navigation

Angular Revolution

A directive for the Slider Revolution created by ThemePunch

Note: *This directive requires the jQuery plugin Slider Revolution, which is a paid plugin and requires license. The plugin is not included in this directive because of this.


Download 1.0.0 | Guide | FAQ | Resources | Report an Issue | **Contribute


Get Started

(1) Get angular-revolution in one of the following ways:

  • clone & build this repository
  • download the release
  • via npm: by running $ npm install angular-revolution from your console
  • or via Bower: by running $ bower install angular-revolution from your console

(2) Include angular-revolution.js (or angular-revolution.min.js) in your index.html, after including Angular itself

(3) Add 'rev.slider' to your main module's list of dependencies

When you're done, your setup should look similar to the following:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="js/angular-revolution.min.js"></script>
    <script>
        var myApp = angular.module('myApp', ['rev.slider']);
        // For Component users, it should look like this:
        // var myApp = angular.module('myApp', [require('angular-revolution')]);
    </script>
    ...
</head>
<body>
    ...
</body>
</html>

Features

  • Easy to use directive
  • Ability to have multiple slider instances on a page, each with their own configuration
  • Template configurable and easily overridden
  • Uses angular framework to present sliders which enables the plugin to be run when it's needed and destroyed when it isn't to save memory

To Do

  • Create ability to pass slides object to the api so slides can be stored in a database.
  • Fully template the slides template using angular methodologies so the slides are dynamic and separate from the default template

Usage

The directive can be used as an element

<rev-slider
  id="rev_slider"
  class="rev_slider"
  data-version="5.1.1RC"
  slider-Type="{{slider.sliderType}}"
  slider-Layout="{{slider.sliderLayout}}"
  responsive-Levels="{{slider.responsiveLevels}}"
  gridwidth="{{slider.gridwidth}}"
  gridheight="{{slider.gridheight}}"
  auto-Height="{{slider.autoHeight}}"
  min-Height="{{slider.minHeight}}"
  full-Screen-Offset-Container="{{slider.fullScreenOffsetContainer}}"
  full-Screen-Offset="{{slider.fullScreenOffset}}"
  delay="{{slider.delay}}"
  disable-Progress-Bar="{{slider.disableProgressBar}}"
  start-Delay="{{slider.startDelay}}"
  stop-After-Loops="{{slider.stopAfterLoops}}"
  stop-At-Slide="{{slider.stopAtSlide}}"
  view-Port="{{slider.viewPort}}"
  lazy-Type="{{slider.lazyType}}"
  dotted-Overlay="{{slider.dottedOverlay}}"
  shadow="{{slider.shadow}}"
  spinner="{{slider.spinner}}"
  hide-All-Caption-At-Lilmit="{{slider.hideAllCaptionAtLilmit}}"
  hide-Caption-At-Limit="{{slider.hideCaptionAtLimit}}"
  hide-Slider-At-Limit="{{slider.hideSliderAtLimit}}"
  debug-Mode="{{slider.debugMode}}"
  extensions="{{slider.extensions}}"
  extensionssuffix="{{slider.extensions_suffix}}"
  fallbacks="{{slider.fallbacks}}"
  parallax="{{slider.parallax}}"
  rev-Carousel="{{slider.carousel}}"
  navigation="{{slider.navigation}}"
  js-File-Location="{{slider.jsFileLocation}}"
  visibility-Levels="{{slider.visibilityLevels}}"
  hide-Thumbs-On-Mobile="{{slider.hideThumbsOnMobile}}"
  slides="slider.slides"
  slider-Template-Url="common/templates/directiveSlider/frontpage.slider.tpl.html"
>
</rev-slider>

or an attribute

<div rev-slider
  id="rev_slider"
  class="rev_slider"
  data-version="5.1.1RC"
  slider-Type="{{slider.sliderType}}"
  slider-Layout="{{slider.sliderLayout}}"
  responsive-Levels="{{slider.responsiveLevels}}"
  gridwidth="{{slider.gridwidth}}"
  gridheight="{{slider.gridheight}}"
  auto-Height="{{slider.autoHeight}}"
  min-Height="{{slider.minHeight}}"
  full-Screen-Offset-Container="{{slider.fullScreenOffsetContainer}}"
  full-Screen-Offset="{{slider.fullScreenOffset}}"
  delay="{{slider.delay}}"
  disable-Progress-Bar="{{slider.disableProgressBar}}"
  start-Delay="{{slider.startDelay}}"
  stop-After-Loops="{{slider.stopAfterLoops}}"
  stop-At-Slide="{{slider.stopAtSlide}}"
  view-Port="{{slider.viewPort}}"
  lazy-Type="{{slider.lazyType}}"
  dotted-Overlay="{{slider.dottedOverlay}}"
  shadow="{{slider.shadow}}"
  spinner="{{slider.spinner}}"
  hide-All-Caption-At-Lilmit="{{slider.hideAllCaptionAtLilmit}}"
  hide-Caption-At-Limit="{{slider.hideCaptionAtLimit}}"
  hide-Slider-At-Limit="{{slider.hideSliderAtLimit}}"
  debug-Mode="{{slider.debugMode}}"
  extensions="{{slider.extensions}}"
  extensionssuffix="{{slider.extensions_suffix}}"
  fallbacks="{{slider.fallbacks}}"
  parallax="{{slider.parallax}}"
  rev-Carousel="{{slider.carousel}}"
  navigation="{{slider.navigation}}"
  js-File-Location="{{slider.jsFileLocation}}"
  visibility-Levels="{{slider.visibilityLevels}}"
  hide-Thumbs-On-Mobile="{{slider.hideThumbsOnMobile}}"
  slides="slider.slides"
  slider-Template-Url="common/templates/directiveSlider/frontpage.slider.tpl.html"
>
</div>

The $scope is used to push slider configurations to the element & attributes which in turn feed into the slider jQuery plugin. Eventually I will add the ability to pass a slides object to the api which will allow slides to come from a database.

Example

index.html

<!-- main container -->
<div class="container-fluid" data-ng-style="{'max-width':'1920px'}">
    <!-- slider parent container -->
    <section class="content-section" data-ng-style="{'max-width':'1920px', 'margin':'0 auto'}">
      <!-- slider container -->
      <div class="rev_slider_wrapper jumbotron" style="background-color:#ddd;margin:0px auto;padding:0px;margin-top:0px;margin-bottom:0px;">
        <!-- angular-revolution as attribute in div -->
        <div rev-slider
          id="rev_slider"
          class="rev_slider"
          data-version="5.1.1RC"
          slider-Type="{{slider.sliderType}}"
          slider-Layout="{{slider.sliderLayout}}"
          responsive-Levels="{{slider.responsiveLevels}}"
          gridwidth="{{slider.gridwidth}}"
          gridheight="{{slider.gridheight}}"
          auto-Height="{{slider.autoHeight}}"
          min-Height="{{slider.minHeight}}"
          full-Screen-Offset-Container="{{slider.fullScreenOffsetContainer}}"
          full-Screen-Offset="{{slider.fullScreenOffset}}"
          delay="{{slider.delay}}"
          disable-Progress-Bar="{{slider.disableProgressBar}}"
          start-Delay="{{slider.startDelay}}"
          stop-After-Loops="{{slider.stopAfterLoops}}"
          stop-At-Slide="{{slider.stopAtSlide}}"
          view-Port="{{slider.viewPort}}"
          lazy-Type="{{slider.lazyType}}"
          dotted-Overlay="{{slider.dottedOverlay}}"
          shadow="{{slider.shadow}}"
          spinner="{{slider.spinner}}"
          hide-All-Caption-At-Lilmit="{{slider.hideAllCaptionAtLilmit}}"
          hide-Caption-At-Limit="{{slider.hideCaptionAtLimit}}"
          hide-Slider-At-Limit="{{slider.hideSliderAtLimit}}"
          debug-Mode="{{slider.debugMode}}"
          extensions="{{slider.extensions}}"
          extensionssuffix="{{slider.extensions_suffix}}"
          fallbacks="{{slider.fallbacks}}"
          parallax="{{slider.parallax}}"
          rev-Carousel="{{slider.carousel}}"
          navigation="{{slider.navigation}}"
          js-File-Location="{{slider.jsFileLocation}}"
          visibility-Levels="{{slider.visibilityLevels}}"
          hide-Thumbs-On-Mobile="{{slider.hideThumbsOnMobile}}"
          slides="slider.slides"
          slider-Template-Url="common/templates/directiveSlider/frontpage.slider.tpl.html"
        >
        </div>
      </div>
    </section>
</div>

index.js

// angular module
angular.module("app", [])
// module controller
.controller("HomeCtrl", ["$scope", function ($scope) {
  // slider settings object set to scope.
  $scope.slider = {
	sliderType: "standard",
	sliderLayout: "auto",
	responsiveLevels: [1920, 1024, 778, 480],
	gridwidth: [1930, 1240, 778, 480],
	gridheight: [768, 768, 960, 720],
	autoHeight: "off",
	minHeight: "",
	fullScreenOffsetContainer: "",
	fullScreenOffset: "",
	delay: 9000,
	disableProgressBar: "on",
	startDelay: "",
	stopAfterLoops: "",
	stopAtSlide: "",
	viewPort: {},
	lazyType: "none",
	dottedOverlay: "none",
	shadow: 0,
	spinner: "off",
	hideAllCaptionAtLilmit: 0,
	hideCaptionAtLimit: 0,
	hideSliderAtLimit: 0,
	debugMode: false,
	extensions: "",
	extensions_suffix: "",
	fallbacks: {
	  simplifyAll: "off",
	  disableFocusListener: false
	},
	parallax: {
	  type: "scroll",
	  origo: "enterpoint",
	  speed: 400,
	  levels: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50]
	},
	carousel: {},
	navigation: {
	  keyboardNavigation: "off",
	  keyboard_direction: "horizontal",
	  mouseScrollNavigation: "off",
	  onHoverStop: "on",
	  touch: {
		touchenabled: "on",
		swipe_treshold: 75,
		swipe_min_touches: 1,
		drag_block_vertical: false,
		swipe_direction: "horizontal"
	  },
	  tabs: {
		style: "zeus",
		enable: true,
		width: 150,
		height: 30,
		min_width: 100,
		wrapper_padding: 0,
		wrapper_color: "transparent",
		wrapper_opacity: "0",
		tmp: "<span class="tp-tab-title">{{title}}</span>",
		visibleAmount: 3,
		hide_onmobile: true,
		hide_under: 480,
		hide_onleave: false,
		hide_delay: 200,
		direction: "horizontal",
		span: true,
		position: "inner",
		space: 1,
		h_align: "left",
		v_align: "top",
		h_offset: 30,
		v_offset: 30
	  }
	},
	jsFileLocation: "",
	visibilityLevels: [1240, 1024, 778, 480],
	hideThumbsOnMobile: "off"
  };
}]);

Default template

<ul data-ng-style="{'max-width':'1920px'}">
  <!-- SLIDE  -->
  <li
  data-index="rs-1255"
  data-transition="slideoverhorizontal"
  data-slotamount="7"
  data-easein="default"
  data-easeout="default"
  data-masterspeed="1500"
  data-thumb="core/templates/default/images/sliders/newspaper_bg1-320x200.jpg"
  data-rotate="0"
  data-fstransition="fade"
  data-fsmasterspeed="1000"
  data-fsslotamount="7"
  data-saveperformance="off"
  data-title="SharePoint"
  data-description="">

  <!-- MAIN IMAGE -->
  <img
  src="core/templates/default/images/sliders/newspaper_bg1.jpg"
  alt=""
  width="1920"
  height="1280"
  data-bgposition="center bottom"
  data-bgfit="cover"
  data-bgrepeat="no-repeat"
  data-bgparallax="10"
  class="rev-slidebg"
  data-no-retina>

  <!-- LAYER NR. 1 -->
  <a class="tp-caption News-Title tp-resizeme rs-parallaxlevel-0"
  data-ui-sref="frontPage.services.spc"
  id="slide-1255-layer-1"
  data-x="['left','left','left','left']"
  data-hoffset="['80','80','40','40']"
  data-y="['top','top','top','top']"
  data-voffset="['450','450','250','150']"
  data-width="364"
  data-height="133"
  data-whitespace="normal"
  data-transform_idle="o:1;"
  data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;"
  data-transform_out="y:[100%];s:1000;s:1000;"
  data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
  data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
  data-start="500"
  data-splitin="none"
  data-splitout="none"
  data-responsive_offset="on"
  data-ng-style="{
  'z-index':'5',
  'min-width':'364px',
  'min-height':'133px',
  'white-space':'normal',
  'max-width':'364px',
  'max-height':'133px',
  'font-size':'70px',
  'line-height':'60px',
  'font-weight':'400',
  'color':'rgba(255, 255, 255, 1.00)',
  'font-family':'Roboto Slab',
  'padding':'0 0 0 0',
  'border-radius':'0 0 0 0'
  }">
  SharePoint
  Consulting
  </a>

  <!-- LAYER NR. 2 -->
  <div class="tp-caption tp-resizeme rs-parallaxlevel-0"
  id="slide-1255-layer-2"
  data-x="['left','left','left','left']"
  data-hoffset="['80','80','40','40']"
  data-y="['top','top','top','top']"
  data-voffset="['587','587','382','282']"
  data-width="none"
  data-height="none"
  data-whitespace="nowrap"
  data-transform_idle="o:1;"
  data-transform_in="x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;"
  data-transform_out="x:[100%];s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;"
  data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
  data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
  data-start="500"
  data-responsive_offset="on"
  data-ng-style="{'z-index':'6', 'line-height':'4px', 'padding':'0 0 0 0', 'border-radius':'0 0 0 0'}">
  <img
  src="core/templates/default/images/sliders/bluebar.png"
  alt=""
  width="350"
  height="4"
  data-ww="['350px','350px','350px','350px']"
  data-hh="['4px','4px','4px','4px']"
  data-no-retina>
  </div>

  <!-- LAYER NR. 3 -->
  <a class="tp-caption News-Subtitle tp-resizeme rs-parallaxlevel-0"
    data-ui-sref="frontPage.services.spc"
    id="slide-1255-layer-3"
    data-x="['left','left','left','left']"
    data-hoffset="['81','81','41','41']"
    data-y="['top','top','top','top']"
    data-voffset="['605','605','401','301']"
    data-width="none"
    data-height="none"
    data-whitespace="nowrap"
    data-transform_idle="o:1;"
    data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:300;e:Power3.easeInOut;"
    data-style_hover="c:rgba(255, 255, 255, 0.65);br:0 0 0px 0;cursor:pointer;"
    data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;"
    data-transform_out="y:[100%];s:1000;s:1000;"
    data-mask_in="x:0px;y:0px;"
    data-mask_out="x:inherit;y:inherit;"
    data-start="500"
    data-splitin="none"
    data-splitout="none"
    data-responsive_offset="on"
    data-ng-style="{
    'z-index':'7',
    'min-width':'auto',
    'min-height':'auto',
    'white-space':'nowrap',
    'max-width':'auto',
    'max-height':'auto',
    'font-size':'15px',
    'line-height':'24px',
    'font-weight':'300',
    'color':'rgba(255, 255, 255, 1.00)',
    'font-family':'Roboto Slab',
    'background-color':'rgba(255, 255, 255, 0)',
    'padding':'0 0 0 0',
    'border-radius':'0 0 0 0'
  }">
  Balance SharePoint & Your Business to reach new heights
  </a>

  <!-- LAYER NR. 4 -->
  <div class="tp-caption - tp-resizeme rs-parallaxlevel-0"
  id="slide-1255-layer-4"
  data-x="['left','left','left','left']"
  data-hoffset="['463','463','443','443']"
  data-y="['top','top','top','top']"
  data-voffset="['607','607','403','303']"
  data-width="none"
  data-height="none"
  data-whitespace="nowrap"
  data-transform_idle="o:1;"
  data-transform_in="x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;"
  data-transform_out="x:[100%];s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;"
  data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
  data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
  data-start="500"
  data-splitin="none"
  data-splitout="none"
  data-responsive_offset="on"
  data-ng-style="{
  'z-index':'8',
  'min-width':'auto',
  'min-height':'auto',
  'white-space':'nowrap',
  'max-width':'auto',
  'max-height':'auto',
  'font-size':'20px',
  'line-height':'22px',
  'font-weight':'400',
  'color':'rgba(0, 210, 255, 1.00)',
  'padding':'0 0 0 0',
  'border-radius':'0 0 0 0'
  }">
  <i class="fa fa-caret-right"></i>
  </div>
  </li>

  <!-- SLIDE  -->
  <li
  data-index="rs-1103"
  data-transition="slideoverhorizontal"
  data-slotamount="7"
  data-easein="default"
  data-easeout="default"
  data-masterspeed="1500"
  data-thumb="core/templates/default/images/sliders/newspaper_bg3-320x200.jpg"
  data-rotate="0"
  data-saveperformance="off"
  data-title="Web Solutions"
  data-description="">

  <!-- MAIN IMAGE -->
  <img
  src="core/templates/default/images/sliders/newspaper_bg2.jpg"
  alt=""
  width="1920"
  height="1180"
  data-bgposition="center bottom"
  data-bgfit="cover"
  data-bgrepeat="no-repeat"
  data-bgparallax="10"
  class="rev-slidebg"
  data-no-retina>

  <!-- LAYER NR. 1 -->
  <a class="tp-caption News-Title tp-resizeme rs-parallaxlevel-0"
  data-ui-sref="frontPage.services.csc"
  id="slide-1103-layer-1"
  data-x="['left','left','left','left']"
  data-hoffset="['80','80','40','40']"
  data-y="['top','top','top','top']"
  data-voffset="['450','450','250','150']"
  data-width="364"
  data-height="133"
  data-whitespace="normal"
  data-transform_idle="o:1;"
  data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;"
  data-transform_out="y:[100%];s:1000;s:1000;"
  data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
  data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
  data-start="500"
  data-splitin="none"
  data-splitout="none"
  data-responsive_offset="on"
  data-ng-style="{
  'z-index':'5',
  'min-width':'364px',
  'min-height':'133px',
  'white-space':'normal',
  'max-width':'364px',
  'max-height':'133px',
  'font-size':'70px',
  'line-height':'60px',
  'font-weight':'400',
  'color':'rgba(255, 255, 255, 1.00)',
  'font-family':'Roboto Slab',
  'padding':'0 0 0 0',
  'border-radius':'0 0 0 0'
  }">
  Websites &
  Solutions
  </a>

  <!-- LAYER NR. 2 -->
  <div class="tp-caption  tp-resizeme rs-parallaxlevel-0"
  id="slide-1103-layer-2"
  data-x="['left','left','left','left']" data-hoffset="['80','80','40','40']"
  data-y="['top','top','top','top']" data-voffset="['587','587','382','282']"
  data-width="none"
  data-height="none"
  data-whitespace="nowrap"
  data-transform_idle="o:1;"
  data-transform_in="x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;"
  data-transform_out="x:[100%];s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;"
  data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
  data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
  data-start="500"
  data-responsive_offset="on"
  data-ng-style="{'z-index':'6', 'line-height':'4px', 'padding':'0 0 0 0', 'border-radius':'0 0 0 0'}">
  <img src="core/templates/default/images/sliders/bluebar.png" alt="" width="350" height="4" data-ww="" data-hh="" data-no-retina>
  </div>

  <!-- LAYER NR. 3 -->
  <a class="tp-caption News-Subtitle tp-resizeme rs-parallaxlevel-0"
  data-ui-sref="frontPage.services.csc"
  id="slide-1103-layer-3"
  data-x="['left','left','left','left']"
  data-hoffset="['81','81','41','41']"
  data-y="['top','top','top','top']"
  data-voffset="['605','605','401','301']"
  data-width="none"
  data-height="none"
  data-whitespace="nowrap"
  data-transform_idle="o:1;"
  data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:300;e:Power3.easeInOut;"
  data-style_hover="c:rgba(255, 255, 255, 0.65);br:0 0 0px 0;cursor:pointer;"
  data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;"
  data-transform_out="y:[100%];s:1000;s:1000;"
  data-mask_in="x:0px;y:0px;"
  data-mask_out="x:inherit;y:inherit;"
  data-start="500"
  data-splitin="none"
  data-splitout="none"
  data-responsive_offset="on"
  data-ng-style="{
  'z-index':'7',
  'min-width':'auto',
  'min-height':'auto',
  'white-space':'nowrap',
  'max-width':'auto',
  'max-height':'auto',
  'font-size':'15px',
  'line-height':'24px',
  'font-weight':'300',
  'color':'rgba(255, 255, 255, 1.00)',
  'font-family':'Roboto Slab',
  'background-color':'rgba(255, 255, 255, 0)',
  'padding':'0 0 0 0',
  'border-radius':'0 0 0 0'
  }">
  Provide unforgettable experiences to your users
  </a>

  <!-- LAYER NR. 4 -->
  <div class="tp-caption - tp-resizeme rs-parallaxlevel-0"
  id="slide-1103-layer-4"
  data-x="['left','left','left','left']" data-hoffset="['423','423','383','383']"
  data-y="['top','top','top','top']" data-voffset="['607','607','403','303']"
  data-width="none"
  data-height="none"
  data-whitespace="nowrap"
  data-transform_idle="o:1;"
  data-transform_in="x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;"
  data-transform_out="x:[100%];s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;"
  data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
  data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
  data-start="500"
  data-splitin="none"
  data-splitout="none"
  data-responsive_offset="on"
  data-ng-style="{
  'z-index':'8',
  'min-width':'auto',
  'min-height':'auto',
  'white-space':'nowrap',
  'max-width':'auto',
  'max-height':'auto',
  'font-size':'20px',
  'line-height':'22px',
  'font-weight':'400',
  'color':'rgba(0, 210, 255, 1.00)',
  'padding':'0 0 0 0',
  'border-radius':'0 0 0 0'
  }">
  <i class="fa fa-caret-right"></i>
  </div>
  </li>
</ul>
<div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>

Attributes

sliderType: The type of slider to use (Standard, Hero, Carousel)

sliderLayout: Responsiveness of slider (Auto, fullwidth, fullscreen)

responsiveLevels: Grid Sizes (Aspect Ratios)

gridwidth: The content container size within a slider for width

gridheight: The content container size within a slider for height

autoHeight: allow the Slider to always keep the Aspect Ratio which is set via the gridwidth and gridheight parameters (on, off)

minHeight: Slider Minimum Height

fullScreenOffsetContainer: Slider’s height will be reduced with the height of the containers

fullScreenOffset: Fullscreen Slider’s height will be reduced/increased with the the value defined

delay: Describes the default (global) length of the slides in ms

disableProgressBar: Display progressbar (on, off)

startDelay: Wait with starting the first animation after the slider has been loaded.

stopAfterLoops: Auto Play stop after the Slider has been looped “x” time

stopAtSlide: Auto Play stop at Slide Nr. “x”

viewPort: Define how many percent of the Slider must be visible before it starts

lazyType: The art to load the images within the slides and navigation containers

dottedOverlay: A Default overlay on slides

shadow: Shadow type which will be drawn via jQuery and css on demand

spinner: Loader (“spinner”) Type

hideAllCaptionAtLilmit: Defines a Global parameter to hide all layers if the browser width is smaller than this

hideCaptionAtLimit: Defines a Global parameter to hide certain layers if the browser width is smaller than this

hideSliderAtLimit: Defines a Global parameter to hide certain layers if the browser width is smaller than this

debugMode: Turns on the Frontend Debug mode,

extensions: Extensions location

extensions_suffix: Extensions suffix

fallbacks: Fallbacks for slider on different devices / browsers

parallax: Defines the configuration for parallax

revCarousel: Defines the settings for carousel

navigation: Defines the settings for navigation

jsFileLocation: Location to js file

visibilityLevels: Visibility Levels

hideThumbsOnMobile: Hide thumbnails on mobile devices

slides: Slides object, still under development

Resources

Reporting issues and Contributing

Please read our Contributor guidelines before reporting an issue or creating a pull request.