Fork me on GitHub
DOWNLOAD!

Slide View Control (AngularJS)

The idea is simple - a slide show control built entirely in AngularJS. This particular control is designed with the following concepts in mind:

So what you really want to see are code and examples. So read on!


Dependencies

The slider has the following dependancies:

AngularJS
Angular Touch
Angular Animate
GreenSock Animation

Getting Started:

1. Add this to your html. For more configuration options, see the API documentation below. Also be sure to check out the code at the top of the page!

<div slide-source="slide in slides" class="slide-viewer" next-arrow-class="slide-next" previous-arrow-class="slide-previous">
    <h1>{{slide.Title}}</h1>
    <p>This is slide number: {{$index}}</p>
</div>

2. Unpackage the download and include the script and css files. Also include additional dependancies:

        <script type="text/javascript" src="assets/lib/TweenMax.min.js"></script>
        <script type="text/javascript" src="assets/angular/angular.min.js"></script>
        <script type="text/javascript" src="assets/angular/angular-animate.min.js"></script>
        <script type="text/javascript" src="assets/angular/angular-touch.min.js"></script>
        <script type="text/javascript" src="assets/angular-slider/slideviewer.js"></script>
        <link rel="stylesheet" type="text/css" href="assets/angular-slider/slideviewer.css" />

3. Update your controller and define the slides:

// 'SlideViewer' must be included:
var app = angular.module('App', ['SlideViewer']);

// the only limitation is that 'slides' must be an array
function SlideExample($scope) {
	$scope.slides = [{Title: "First"}, {Title: "Second"}, {Title: "Third"}];
}

4. [OPTIONALLY] Define a few additional css styles. Be sure that you have "left-arrow.png" and "right-arrow.png" (or change this css):

/* SLIDE VIEWER CSS STYLE EXAMPLE - BASIC */
.slide-next, .slide-previous { top: 60px; height: 87px; width: 52px; position: absolute; z-index: 100; background-position: center center; opacity: 0.4; filter: alpha(opacity=40); }
.slide-next:hover, .slide-previous:hover { opacity: 0.8; filter: alpha(opacity=80); }
.slide-next, .slide-previous { -webkit-transition: opacity 0.35s ease-in-out; -moz-transition: opacity 0.35s ease-in-out; -ms-transition: opacity 0.35s ease-in-out; -o-transition: opacity 0.35s ease-in-out; transition: opacity 0.35s ease-in-out; }
.slide-next { right: 5px; background-image: url('../img/right-arrow.png'); }
.slide-previous { background-image: url('../img/left-arrow.png'); left: 5px; }

5. You are done! The following is the result:

{{slide.Title}}

This is slide number: {{$index}}


API Documentation

The following are each of the options that can be used with the slide viewer:

slide-source attribute required
The data source for the slide data. In the form of <x> in <y>, where "<y>" is an array and "<x>" is the name for each item in that array.
index-variable attribute optional
The name of a variable used to alter the index. If not specified the value of "currentIndex" will be used.
previous-arrow-class attribute optional
A css class that will be applied to the previous arrow div. The class should specify the image to use and can use :hover or other css options to alter the look/behavior. If this property isn't provided, the previous arrow will not be included.
next-arrow-class attribute optional
A css class that will be applied to the next arrow div. This is used the same way as the "previous-arrow" option.
clip-contents attribute optional
Whether or not to clip the contents within the slide viewer. If this is "false" or not present the slides will fill the entire bounds of the area
clip-width attribute optional
When clip contents is true, this is the number of pixels to clip from the left and right hand side of the slide viewer. The default when not provided is 50 pixels
next-slide attribute optional
Should be the name of a function defined in the parent scope that will be called *before* navigation has happened. One parameter "newIdx" is passed in. The function can return a boolean indicating whether or not to continue with the navigation. ("false" = no navigation, anything else = continue)
prev-slide attribute optional
Should be the name of a function defined in the parent scope that will be called *before* navigation has happened. One parameter "newIdx" is passed in. The function can return a boolean indicating whether or not to continue with the navigation. ("false" = no navigation, anything else = continue)
use-keyboard attribute optional
If the value is "true" keyboard events will be automatically hooked up. Otherwise the slide viewer will not respond to keyboard events!
control-button-class attribute optional
This is the class that should be applied to the play/pause button. In practice this is used in combination with the following two classes:
  • "play" - this class is added when the slide show is paused (play is available)
  • "pause" - this class is added when the slide show is playing (pause allowed)
With this in mind styling play and pause uniquely is as simple as using ".className.play" and ".className.pause". NOTE: Either play OR pause classes will be applied but not both at once.
pin-container-class attribute optional
This is the name of a class that will be applied to the pin container. This makes it very easy to move, resize or change the pin container.
control-pin-class attribute optional
This is the class thatshould be applied to each of the control pins. This is used in combination with the "active" class which is used to indicate the slide is active. To style an active pin, then use ".className.active".
auto-advance attribute optional
The number of milliseconds to wait before automatically advancing to the next slide. When this has not been provided the pause button will never be shown and auto play will not work!
background-source attribute optional
This indicates where the slide viewer should pull source URL's for the background imges from. When provided the slide viewer will look at each slide object and will look for a property with the name provided. When not provided the background for slides will not be set. The advantage of using this over an image tag is this actually uses the background css property with 'cover' as the size mode. This allows the viewer to be responsive without ruining the background (scaled with the browser window).
slide-transition attribute optional
This specifies the animation transition between slides. The default is "slide". The following are the options:
  • Slide - transition horizontally left/right across the screen
  • Fade - fade the current slide out and the new slide in

Styles You Can Use

The basic slide viewer comes with a number of styles that will work by default. To start with, there are two versions of the controls: image based and font based. Information on those is in the next two subsections of this documentation.

Font Based Icons

To use the font based controls simply use the following styles:

Combine these with either icon-lg-ctrl (for larger control icons) or icon-sm-ctrl for smaller icons. To customize the icons further in both color and size, just override the large and small classes icon classes in css. The default styles to override are as follow:

.icon-lg-ctrl { color: #4D8BFF; font-size: 100px; }
.icon-sm-ctrl { color: #4D8BFF; font-size: 30px; }
.icon-lg-ctrl:hover,.icon-sm-ctrl:hover { color: #B3CDFF; }

Image Based Icons

The slide viewer also supports image based icons for complete flexibility over the slide controls. These can be accessed with the following css classes (basically remove "icon-" from the front of the icon classes):

The easiest way to override the images is to replace the default sprite that comes with the download with your own sprite. Of course, you can enter any css classes you want for the various properties so custom images can be included individually rather than as a sprite as well.

Other styles

There are a few other styles that can be easily configured for the slide show viewer. These are as follow:

Next Features

As time is available, the following is the short list of features that will be added:

License

Creative Commons License Angular Slider by drewbble.com is licensed under a Creative Commons Attribution 4.0 International License . Based on a work at www.drewbble.com/angular-slider/.