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

vertical slide method #378

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

vertical slide method #378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b824850
just use as vertical .
shenqihui Nov 18, 2015
98778e8
vertical slide method
shenqihui Nov 18, 2015
d0b8d8a
不进行length +1 次数的循环。1次不循环。
shenqihui Dec 29, 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
2 changes: 2 additions & 0 deletions dist/angular-carousel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ ul[rn-carousel-buffered] > li {

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

/* indicators */
div.rn-carousel-indicator span {
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-carousel.css.map
View file
Open in desktop

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

33 changes: 26 additions & 7 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 v1.0.1 - 2015-11-16
* @version v1.0.1 - 2015-12-29
* @link http://revolunet.github.com/angular-carousel
* @author Julien Bouquillon <[email protected]>
* @license MIT License, http://www.opensource.org/licenses/MIT
Expand Down Expand Up @@ -138,14 +138,20 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach

.service('computeCarouselSlideStyle', ["DeviceCapabilities", function(DeviceCapabilities) {
// compute transition transform properties for a given slide and global offset
return function(slideIndex, offset, transitionType) {
return function(slideIndex, offset, transitionType, options) {
var style = {
display: 'inline-block'
},
opacity,
slideTransformValue,
absoluteLeft = (slideIndex * 100) + offset,
slideTransformValue = DeviceCapabilities.has3d ? 'translate3d(' + absoluteLeft + '%, 0, 0)' : 'translate3d(' + absoluteLeft + '%, 0)',
distance = ((100 - Math.abs(absoluteLeft)) / 100);
if(options.isVertical) {
// vertical
slideTransformValue = DeviceCapabilities.has3d ? 'translate3d(0, ' + absoluteLeft + '%, 0)' : 'translate3d(0, ' + absoluteLeft + '%)';
} else {
slideTransformValue = DeviceCapabilities.has3d ? 'translate3d(' + absoluteLeft + '%, 0, 0)' : 'translate3d(' + absoluteLeft + '%, 0)';
}

if (!DeviceCapabilities.transformProperty) {
// fallback to default slide if transformProperty is not available
Expand All @@ -165,7 +171,11 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach

transformFrom = offset < (slideIndex * -100) ? 100 : 0;
degrees = offset < (slideIndex * -100) ? maxDegrees : -maxDegrees;
style[DeviceCapabilities.transformProperty] = slideTransformValue + ' ' + 'rotateY(' + degrees + 'deg)';
if(options.isVertical) {
style[DeviceCapabilities.transformProperty] = slideTransformValue + ' ' + 'rotateX(' + (-degrees) + 'deg)';
} else {
style[DeviceCapabilities.transformProperty] = slideTransformValue + ' ' + 'rotateY(' + degrees + 'deg)';
}
style[DeviceCapabilities.transformProperty + '-origin'] = transformFrom + '% 50%';
} else if (transitionType == 'zoom') {
style[DeviceCapabilities.transformProperty] = slideTransformValue;
Expand Down Expand Up @@ -272,7 +282,8 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
bufferSize: 5,
/* in container % how much we need to drag to trigger the slide change */
moveTreshold: 0.1,
defaultIndex: 0
defaultIndex: 0,
isVertical: iAttributes.rnCarouselVertical === ''
};

// TODO
Expand Down Expand Up @@ -324,7 +335,7 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
// todo : optim : apply only to visible items
var x = scope.carouselBufferIndex * 100 + offset;
angular.forEach(getSlidesDOM(), function(child, index) {
child.style.cssText = createStyleString(computeCarouselSlideStyle(index, x, options.transitionType));
child.style.cssText = createStyleString(computeCarouselSlideStyle(index, x, options.transitionType, options));
});
}

Expand Down Expand Up @@ -380,8 +391,16 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
},
finish: function() {
scope.$apply(function() {
var slidesDOM = getSlidesDOM();
if(index >= slidesDOM.length) {
index = 0;
}
scope.carouselIndex = index;
offset = index * -100;
if(slidesDOM.length < 2) {
offset = 0;
} else {
offset = index * -100;
}
updateBufferIndex();
$timeout(function () {
locked = false;
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.

36 changes: 36 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,24 @@ <h3>buffered ngRepeat and custom indicators </h3>
</div>
</div>
<br>
<div>
<h3>buffered ngRepeat and custom indicators and vertical slide</h3>
<div class="details">
</div>
<div class="carousel-demo">
<ul rn-carousel rn-carousel-vertical rn-carousel-index="carouselIndex221" rn-carousel-auto-slide rn-carousel-buffered class="carousel2">
<li ng-repeat="slide in slides2 track by slide.id" ng-class="'id-' + slide.id">
<div ng-style="{'background-image': 'url(' + slide.img + ')'}" class="bgimage">
#{{ slide.id }}
</div>
</li>
</ul>
<div class="rn-carousel-indicator custom-indicator">
<span ng-repeat="slide in slides2" ng-class="{active: $index==$parent.carouselIndex221}" ng-click="$parent.carouselIndex221 = $index">★</span>
</div>
</div>
</div>
<br>
<div >
<h3>buffered ngRepeat with custom transition</h3>
<div class="details">Use the 'hexagon' transition. index is shared with the carousel below.
Expand All @@ -87,6 +105,24 @@ <h3>buffered ngRepeat with custom transition</h3>
</div>
</div>
<br>
<div >
<h3>buffered ngRepeat with custom transition and vertical slide</h3>
<div class="details">Use the 'hexagon' transition. index is shared with the carousel below.
</div>
<div class="carousel-demo">
<ul rn-carousel rn-carousel-vertical rn-carousel-index="carouselIndex31" rn-carousel-transition="hexagon" rn-carousel-buffered class="carousel3">
<li ng-repeat="slide in slides3 track by slide.id">
<div ng-style="{'background-image': 'url(' + slide.img + ')'}" class="bgimage">
#{{ slide.id }}
</div>
</li>
</ul>
<div class="rn-carousel-indicator custom-indicator">
<span ng-repeat="slide in slides2" ng-class="{active: $index==$parent.carouselIndex31}" ng-click="$parent.carouselIndex31 = $index">★</span>
</div>
</div>
</div>
<br>
<div>
<h3>Custom templates without ng-repeat and auto-slide</h3>
<div class="details">
Expand Down
3 changes: 3 additions & 0 deletions src/css/angular-carousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ ul[rn-carousel-buffered] > li {

ul[rn-carousel-transition="hexagon"] {
overflow:visible;
&[rn-carousel-vertical] {
overflow: hidden;
}
}

/* indicators */
Expand Down
31 changes: 25 additions & 6 deletions src/directives/rn-carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,20 @@

.service('computeCarouselSlideStyle', function(DeviceCapabilities) {
// compute transition transform properties for a given slide and global offset
return function(slideIndex, offset, transitionType) {
return function(slideIndex, offset, transitionType, options) {
var style = {
display: 'inline-block'
},
opacity,
slideTransformValue,
absoluteLeft = (slideIndex * 100) + offset,
slideTransformValue = DeviceCapabilities.has3d ? 'translate3d(' + absoluteLeft + '%, 0, 0)' : 'translate3d(' + absoluteLeft + '%, 0)',
distance = ((100 - Math.abs(absoluteLeft)) / 100);
if(options.isVertical) {
// vertical
slideTransformValue = DeviceCapabilities.has3d ? 'translate3d(0, ' + absoluteLeft + '%, 0)' : 'translate3d(0, ' + absoluteLeft + '%)';
} else {
slideTransformValue = DeviceCapabilities.has3d ? 'translate3d(' + absoluteLeft + '%, 0, 0)' : 'translate3d(' + absoluteLeft + '%, 0)';
}

if (!DeviceCapabilities.transformProperty) {
// fallback to default slide if transformProperty is not available
Expand All @@ -86,7 +92,11 @@

transformFrom = offset < (slideIndex * -100) ? 100 : 0;
degrees = offset < (slideIndex * -100) ? maxDegrees : -maxDegrees;
style[DeviceCapabilities.transformProperty] = slideTransformValue + ' ' + 'rotateY(' + degrees + 'deg)';
if(options.isVertical) {
style[DeviceCapabilities.transformProperty] = slideTransformValue + ' ' + 'rotateX(' + (-degrees) + 'deg)';
} else {
style[DeviceCapabilities.transformProperty] = slideTransformValue + ' ' + 'rotateY(' + degrees + 'deg)';
}
style[DeviceCapabilities.transformProperty + '-origin'] = transformFrom + '% 50%';
} else if (transitionType == 'zoom') {
style[DeviceCapabilities.transformProperty] = slideTransformValue;
Expand Down Expand Up @@ -193,7 +203,8 @@
bufferSize: 5,
/* in container % how much we need to drag to trigger the slide change */
moveTreshold: 0.1,
defaultIndex: 0
defaultIndex: 0,
isVertical: iAttributes.rnCarouselVertical === ''
};

// TODO
Expand Down Expand Up @@ -245,7 +256,7 @@
// todo : optim : apply only to visible items
var x = scope.carouselBufferIndex * 100 + offset;
angular.forEach(getSlidesDOM(), function(child, index) {
child.style.cssText = createStyleString(computeCarouselSlideStyle(index, x, options.transitionType));
child.style.cssText = createStyleString(computeCarouselSlideStyle(index, x, options.transitionType, options));
});
}

Expand Down Expand Up @@ -301,8 +312,16 @@
},
finish: function() {
scope.$apply(function() {
var slidesDOM = getSlidesDOM();
if(index >= slidesDOM.length) {
index = 0;
}
scope.carouselIndex = index;
offset = index * -100;
if(slidesDOM.length < 2) {
offset = 0;
} else {
offset = index * -100;
}
updateBufferIndex();
$timeout(function () {
locked = false;
Expand Down