Skip to content
This repository has been archived by the owner on May 7, 2021. It is now read-only.

A flexible module for AngularJS to implement slideshow-like elements.

License

Notifications You must be signed in to change notification settings

theInspiredOnes/angular-slideshow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

#angular-slideshow-module

A flexible module for AngularJS to implement slideshow-like elements.

##Installation

All you need is AngularJS and the slideshow module in slideshow.js.

<script type="text/javascript" src="path/to/js/angular.min.js"></script>
<script type="text/javascript" src="path/to/js/slideshow.js"></script>

If you already have an Angular app up and running, add slideshow to its dependencies like so:

angular.module('myCoolApp', ['slideshow'])

##Usage

Properly installed the slideshow directive is ready to use. It is invoked by the data-slideshow attribute wich contains the display time of one slideshow element as value.

The slideshow elements make use of the ng-class directive and get the class visible if cur is equal to the index of the respective slideshow element or the class out if out equal to the index of the respective slideshow element.

###As stand-alone app

If the slideshow is the only use of Angular on your website you can realize it like this:

<div data-ng-app="slideshow" data-slideshow="6000" class="slideshow">
	<div class="visible" data-ng-class="{visible: cur==0, out: out==0}"></div> 
	<div data-ng-class="{visible: cur==1, out: out==1}"></div> 
	<div data-ng-class="{visible: cur==2, out: out==2}"></div> 
</div>

###As dependency

If the slideshow is embedded in your Angular app do it like this:

<div data-ng-app="myCoolApp">
	<!--...-->
	<div data-ng-app="slideshow" data-slideshow="6000" class="slideshow">
		<div class="visible" data-ng-class="{visible: cur==0, out: out==0}"></div> 
		<div data-ng-class="{visible: cur==1, out: out==1}"></div> 
		<div data-ng-class="{visible: cur==2, out: out==2}"></div> 
	</div>
	<!--...-->
</div>

##CSS

The appearance of the slideshow element depends solely on its CSS. In most cases the minimum CSS looks like this:

.slideshow {
   position: relative;
   /* your element dimensions */
   height: 500px; 
   width: 500px;
}

.slideshow > div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

For the slideshow module to actually do something visible you have to add to this CSS depending on what you wish to create. See the examples for different possibilities.

About

A flexible module for AngularJS to implement slideshow-like elements.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published