Skip to content
This repository was archived by the owner on May 10, 2018. It is now read-only.

Multiple slides #283

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Multiple slides #283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
55aa50c
Set up demo slides for testing with bootstrap.
rserur Jan 6, 2015
887f610
Added 'multiple' transition type for use with boostrap columns.
rserur Jan 6, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions demo/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
html, body {
height:100%;
html, body {
height:100%;
padding:0;
margin:0;
}
Expand Down Expand Up @@ -36,7 +36,7 @@ h3 {

ul[rn-carousel] {
width:400px;
height:200px;
height:240px;
margin: 0 auto;
}

Expand Down Expand Up @@ -77,3 +77,12 @@ input.tiny {
.custom-indicator span.active {
color:yellow !important;
}

.bootstrap-slide {
background: #FFFFFF;
height: 240px;
line-height: 240px;
font-size: 200%;
text-align:center;
border: 2px solid #000000;
}
3 changes: 1 addition & 2 deletions dist/angular-carousel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,14 @@ ul[rn-carousel] {
padding: 0;
margin: 0;
list-style-type: none;
width: 100%;
height: 100%;
display: inline-block; }

/* prevent flickering when moving buffer */
ul[rn-carousel-buffered] > li {
display: none; }

ul[rn-carousel-transition="hexagon"] {
ul[rn-carousel-transition="hexagon"], ul[rn-carousel-transition="multiple"] {
overflow: visible; }

/* indicators */
Expand Down
135 changes: 69 additions & 66 deletions dist/angular-carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Angular Carousel - Mobile friendly touch carousel for AngularJS
* @version v0.3.7 - 2014-11-11
* @version v0.3.7 - 2015-01-06
* @link http://revolunet.github.com/angular-carousel
* @author Julien Bouquillon <[email protected]>
* @license MIT License, http://www.opensource.org/licenses/MIT
Expand All @@ -20,57 +20,36 @@ angular.module('angular-carousel', [

angular.module('angular-carousel')

.directive('rnCarouselAutoSlide', ['$timeout', function($timeout) {
.directive('rnCarouselAutoSlide', ['$interval', function($interval) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var delay = Math.round(parseFloat(attrs.rnCarouselAutoSlide) * 1000),
timer = increment = false, slidesCount = element.children().length;

if(!scope.carouselExposedIndex){
scope.carouselExposedIndex = 0;
}
stopAutoplay = function () {
if (angular.isDefined(timer)) {
$timeout.cancel(timer);
var stopAutoPlay = function() {
if (scope.autoSlider) {
$interval.cancel(scope.autoSlider);
scope.autoSlider = null;
}
timer = undefined;
};

increment = function () {
if (scope.carouselExposedIndex < slidesCount - 1) {
scope.carouselExposedIndex = scope.carouselExposedIndex + 1;
} else {
scope.carouselExposedIndex = 0;
}
var restartTimer = function() {
scope.autoSlide();
};

restartTimer = function (){
stopAutoplay();
timer = $timeout(increment, delay);
};

scope.$watch('carouselIndex', function(){
restartTimer();
});

restartTimer();
if (attrs.rnCarouselPauseOnHover && attrs.rnCarouselPauseOnHover != 'false'){
element.on('mouseenter', stopAutoplay);
scope.$watch('carouselIndex', restartTimer);

if (attrs.hasOwnProperty('rnCarouselPauseOnHover') && attrs.rnCarouselPauseOnHover !== 'false'){
element.on('mouseenter', stopAutoPlay);
element.on('mouseleave', restartTimer);
}

scope.$on('$destroy', function(){
stopAutoplay();
element.off('mouseenter', stopAutoplay);
stopAutoPlay();
element.off('mouseenter', stopAutoPlay);
element.off('mouseleave', restartTimer);
});


}
};
}]);

angular.module('angular-carousel')

.directive('rnCarouselIndicators', ['$parse', function($parse) {
Expand Down Expand Up @@ -201,6 +180,11 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
opacity = 0.3 + distance * 0.7;
}
style.opacity = opacity;
} else if (transitionType == 'multiple') {
var transformFrom = 100,
transformFrom = offset < (slideIndex * -100) ? 100 : 0;
style[DeviceCapabilities.transformProperty] = slideTransformValue;
style[DeviceCapabilities.transformProperty + '-origin'] = transformFrom + '% 50%';
} else {
style[DeviceCapabilities.transformProperty] = slideTransformValue;
}
Expand Down Expand Up @@ -306,23 +290,15 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
destination,
swipeMoved = false,
//animOnIndexChange = true,
currentSlides,
currentSlides = [],
elWidth = null,
elX = null,
animateTransitions = true,
intialState = true,
animating = false,
mouseUpBound = false,
locked = false;

if(iAttributes.rnCarouselControls!==undefined) {
// dont use a directive for this
var tpl = '<div class="rn-carousel-controls">\n' +
' <span class="rn-carousel-control rn-carousel-control-prev" ng-click="prevSlide()" ng-if="carouselIndex > 0"></span>\n' +
' <span class="rn-carousel-control rn-carousel-control-next" ng-click="nextSlide()" ng-if="carouselIndex < ' + repeatCollection + '.length - 1"></span>\n' +
'</div>';
iElement.append($compile(angular.element(tpl))(scope));
}

$swipe.bind(iElement, {
start: swipeStart,
move: swipeMove,
Expand Down Expand Up @@ -403,11 +379,13 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
updateSlidesPosition(state.x);
},
finish: function() {
locked = false;
scope.$apply(function() {
scope.carouselIndex = index;
offset = index * -100;
updateBufferIndex();
$timeout(function () {
locked = false;
}, 0, false);
});
}
});
Expand All @@ -422,9 +400,25 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
elWidth = getContainerWidth();
}

function bindMouseUpEvent() {
if (!mouseUpBound) {
mouseUpBound = true;
$document.bind('mouseup', documentMouseUpEvent);
}
}

function unbindMouseUpEvent() {
if (mouseUpBound) {
mouseUpBound = false;
$document.unbind('mouseup', documentMouseUpEvent);
}
}

function swipeStart(coords, event) {
// console.log('swipeStart', coords, event);
$document.bind('mouseup', documentMouseUpEvent);
if (locked || currentSlides.length <= 1) {
return;
}
updateContainerWidth();
elX = iElement[0].querySelector('li').getBoundingClientRect().left;
pressed = true;
Expand All @@ -434,10 +428,8 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach

function swipeMove(coords, event) {
//console.log('swipeMove', coords, event);
if (locked) {
return;
}
var x, delta;
bindMouseUpEvent();
if (pressed) {
x = coords.x;
delta = startX - x;
Expand All @@ -461,14 +453,29 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
});
}

var autoSlider;
if (iAttributes.rnCarouselControls!==undefined) {
// dont use a directive for this
var nextSlideIndexCompareValue = isRepeatBased ? repeatCollection.replace('::', '') + '.length - 1' : currentSlides.length - 1;
var tpl = '<div class="rn-carousel-controls">\n' +
' <span class="rn-carousel-control rn-carousel-control-prev" ng-click="prevSlide()" ng-if="carouselIndex > 0"></span>\n' +
' <span class="rn-carousel-control rn-carousel-control-next" ng-click="nextSlide()" ng-if="carouselIndex < ' + nextSlideIndexCompareValue + '"></span>\n' +
'</div>';
iElement.append($compile(angular.element(tpl))(scope));
}

if (iAttributes.rnCarouselAutoSlide!==undefined) {
var duration = parseInt(iAttributes.rnCarouselAutoSlide, 10) || options.autoSlideDuration;
autoSlider = $interval(function() {
if (!locked && !pressed) {
scope.nextSlide();
scope.autoSlide = function() {
if (scope.autoSlider) {
$interval.cancel(scope.autoSlider);
scope.autoSlider = null;
}
}, duration * 1000);
scope.autoSlider = $interval(function() {
if (!locked && !pressed) {
scope.nextSlide();
}
}, duration * 1000);
};
}

if (iAttributes.rnCarouselIndex) {
Expand All @@ -479,10 +486,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
if (angular.isFunction(indexModel.assign)) {
/* check if this property is assignable then watch it */
scope.$watch('carouselIndex', function(newValue) {
if (!locked) {
updateParentIndex(newValue);
}

updateParentIndex(newValue);
});
scope.$parent.$watch(indexModel, function(newValue, oldValue) {

Expand Down Expand Up @@ -534,7 +538,6 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach

scope[deepWatch?'$watch':'$watchCollection'](repeatCollection, function(newValue, oldValue) {
//console.log('repeatCollection', currentSlides);
var oldSlides = (currentSlides || newValue).slice();
currentSlides = newValue;
// if deepWatch ON ,manually compare objects to guess the new position
if (deepWatch && angular.isArray(newValue)) {
Expand All @@ -553,8 +556,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
if (event && !swipeMoved) {
return;
}

$document.unbind('mouseup', documentMouseUpEvent);
unbindMouseUpEvent();
pressed = false;
swipeMoved = false;
destination = startX - coords.x;
Expand Down Expand Up @@ -593,7 +595,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
}

scope.$on('$destroy', function() {
$document.unbind('mouseup', documentMouseUpEvent);
unbindMouseUpEvent();
});

scope.carouselBufferIndex = 0;
Expand Down Expand Up @@ -640,7 +642,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
winEl.bind('resize', onOrientationChange);

scope.$on('$destroy', function() {
$document.unbind('mouseup', documentMouseUpEvent);
unbindMouseUpEvent();
winEl.unbind('orientationchange', onOrientationChange);
winEl.unbind('resize', onOrientationChange);
});
Expand Down Expand Up @@ -1135,8 +1137,9 @@ angular.module('angular-carousel.shifty', [])
// CommonJS
module.exports = Tweenable;
} else if (typeof define === 'function' && define.amd) {
// AMD
define(function () {return Tweenable;});
// AMD: define it as a named module to avoid the mismatched error(http://requirejs.org/docs/errors.html#mismatch)
define('shifty', [], function () {return Tweenable;});
root.Tweenable = Tweenable;
} else if (typeof root.Tweenable === 'undefined') {
// Browser: Make `Tweenable` globally accessible.
root.Tweenable = Tweenable;
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-carousel.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions dist/angular-carousel.min.js
View file
Open in desktop

Large diffs are not rendered by default.

33 changes: 33 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='./dist/angular-carousel.css' rel='stylesheet' type='text/css'>
<link href='./demo/demo.css' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="DemoCtrl">
<a href="https://github.com/revolunet/angular-carousel"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
Expand Down Expand Up @@ -146,6 +147,38 @@ <h3>Add/Remove items in the collection</h3>
</div>

</div>
<div>
<h3 >Multiple Items with Bootstrap</h3>
<div class="row">
<ul rn-carousel rn-carousel-index="3" rn-carousel-transition="multiple">
<li class="bootstrap-slide">
<div class="col-xs-4">
Item 1
</div>
</li>
<li class="bootstrap-slide">
<div class="col-xs-4">
Item 2
</div>
</li>
<li class="bootstrap-slide">
<div class="col-xs-4">
Item 3
</div>
</li>
<li class="bootstrap-slide">
<div class="col-xs-4">
Item 4
</div>
</li>
<li class="bootstrap-slide">
<div class="col-xs-4">
Item 5
</div>
</li>
</ul>
</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
Expand Down
3 changes: 1 addition & 2 deletions src/css/angular-carousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ ul[rn-carousel] {
padding:0;
margin:0;
list-style-type:none;
width:100%;
height:100%;
display:inline-block;
}
Expand All @@ -33,7 +32,7 @@ ul[rn-carousel-buffered] > li {
display:none;
}

ul[rn-carousel-transition="hexagon"] {
ul[rn-carousel-transition="hexagon"], ul[rn-carousel-transition="multiple"] {
overflow:visible;
}

Expand Down
5 changes: 5 additions & 0 deletions src/directives/rn-carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,11 @@
opacity = 0.3 + distance * 0.7;
}
style.opacity = opacity;
} else if (transitionType == 'multiple') {
var transformFrom = 100,
transformFrom = offset < (slideIndex * -100) ? 100 : 0;
style[DeviceCapabilities.transformProperty] = slideTransformValue;
style[DeviceCapabilities.transformProperty + '-origin'] = transformFrom + '% 50%';
} else {
style[DeviceCapabilities.transformProperty] = slideTransformValue;
}
Expand Down