Angular Revolution
ThemePunch
A directive for the Slider Revolution created byNote: *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:
... ...
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
or an attribute
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 --> <!-- slider parent container --> <!-- slider container --> <!-- angular-revolution as attribute in div -->
index.js
// angular moduleangular.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: "{{title}}", 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
<!-- SLIDE --> <!-- MAIN IMAGE --> <!-- LAYER NR. 1 --> SharePoint Consulting <!-- LAYER NR. 2 --> <!-- LAYER NR. 3 --> Balance SharePoint & Your Business to reach new heights <!-- LAYER NR. 4 --> <!-- SLIDE --> <!-- MAIN IMAGE --> <!-- LAYER NR. 1 --> Websites & Solutions <!-- LAYER NR. 2 --> <!-- LAYER NR. 3 --> Provide unforgettable experiences to your users <!-- LAYER NR. 4 -->
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.