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

Added functionality which allows to set how many slides will slide on… #368

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added functionality which allows to set how many slides will slide on… #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ angular.module('MyApp', ['angular-carousel']);
library](https://github.com/jeremyckahn/shifty/blob/master/src/shifty.formulas.js) (default=easeIn)
- `rn-carousel-duration`: add this attribute to set the duration of the transition (default=300)
- `rn-carousel-controls-allow-loop`: add this attribute to allow looping through slides from prev/next controls
- `rn-carousel-items-per-slide`: add this attribute to specify how many slides will slide on one click (used for multiple item slider) / default value "1" if not used

## Indicators

Expand Down
11 changes: 11 additions & 0 deletions dist/angular-carousel.css
View file
Open in desktop

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

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.

28 changes: 23 additions & 5 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.13 - 2015-06-15
* @version v0.3.13 - 2015-09-30
* @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 @@ -292,7 +292,8 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
intialState = true,
animating = false,
mouseUpBound = false,
locked = false;
locked = false,
slidesPerClickLimit = parseInt(iAttributes.rnCarouselItemsPerSlide);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

slidesPerClickLimit = parseInt(iAttributes.rnCarouselItemsPerSlide) || 1;
Also, I'd move it to defaultOptions.


//rn-swipe-disabled =true will only disable swipe events
if(iAttributes.rnSwipeDisabled !== "true") {
Expand Down Expand Up @@ -329,7 +330,12 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
}

scope.nextSlide = function(slideOptions) {
var index = scope.carouselIndex + 1;
var index;
if(isNaN(slidesPerClickLimit) === false && currentSlides.length - scope.carouselIndex + slidesPerClickLimit >= slidesPerClickLimit && currentSlides.length/slidesPerClickLimit > 1) {
index = scope.carouselIndex + slidesPerClickLimit;
} else {
index = scope.carouselIndex + 1;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need in else + 1, just use default 1 value for slidesPerClickLimit

}
if (index > currentSlides.length - 1) {
index = 0;
}
Expand All @@ -339,7 +345,12 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach
};

scope.prevSlide = function(slideOptions) {
var index = scope.carouselIndex - 1;
var index;
if(isNaN(slidesPerClickLimit) === false && currentSlides.length - scope.carouselIndex + slidesPerClickLimit >= slidesPerClickLimit && currentSlides.length/slidesPerClickLimit > 1) {
index = scope.carouselIndex - slidesPerClickLimit;
} else {
index = scope.carouselIndex - 1;
}
if (index < 0) {
index = currentSlides.length - 1;
}
Expand Down Expand Up @@ -453,8 +464,15 @@ angular.module('angular-carousel').run(['$templateCache', function($templateCach

if (iAttributes.rnCarouselControls!==undefined) {
// dont use a directive for this
var slidesCountInCurrent = isRepeatBased ? scope[repeatCollection.replace('::', '')].length : currentSlides.length;
var noneDividableCarouselItemCount = 1;
if(isNaN(slidesPerClickLimit) === false){
noneDividableCarouselItemCount = (slidesCountInCurrent%slidesPerClickLimit !== 0 && slidesCountInCurrent/slidesPerClickLimit > 1) ? (slidesCountInCurrent%slidesPerClickLimit) : 1;
} else {
noneDividableCarouselItemCount = 1;
}
var canloop = ((isRepeatBased ? scope[repeatCollection.replace('::', '')].length : currentSlides.length) > 1) ? angular.isDefined(tAttributes['rnCarouselControlsAllowLoop']) : false;
var nextSlideIndexCompareValue = isRepeatBased ? repeatCollection.replace('::', '') + '.length - 1' : currentSlides.length - 1;
var nextSlideIndexCompareValue = isRepeatBased ? repeatCollection.replace('::', '') + '.length - ' + noneDividableCarouselItemCount.toString() : 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 || ' + canloop + '"></span>\n' +
' <span class="rn-carousel-control rn-carousel-control-next" ng-click="nextSlide()" ng-if="carouselIndex < ' + nextSlideIndexCompareValue + ' || ' + canloop + '"></span>\n' +
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: 27 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h1>AngularJS Touch Carousel</h1>
Swipe these demos with your mouse or finger
</div>

<div>
<div class="demo-container">
<div>
<h3>Buffered ngRepeat demo</h3>
<div class="details">A simple buffered ng-repeat with a custom template.
Expand All @@ -37,6 +37,24 @@ <h3>Buffered ngRepeat demo</h3>
</ul>
</div>
</div>
<br>
<div>
<h3>Buffered ngRepeat demo with Slides per click enabled</h3>
<div class="details">A simple buffered ng-repeat with a custom template.
<br>
Swipe 50 slides with only 5 slides in the DOM. use builtin controls
</div>
<div class="carousel-demo slides-per-click-demo">
index : <input type="number" class="tiny" ng-model="carouselIndex31">
<ul rn-carousel rn-carousel-controls rn-carousel-index="carouselIndex31" rn-carousel-buffered class="carousel1" rn-carousel-items-per-slide="2">
<li ng-repeat="slide in slides 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>
</div>
<div>
<h3>buffered ngRepeat with auto-slide(pause on hover) and builtin indicators </h3>
<div class="details">
Expand Down Expand Up @@ -155,7 +173,7 @@ <h3>End to End Swiping</h3>
<br>
</div>
<div class="carousel-demo" >

<ul rn-carousel rn-carousel-index="carouselIndex7" rn-carousel-buffered rn-carousel-on-infinite-scroll-right="loadNextImages()" rn-carousel-on-infinite-scroll-left="loadPreviousImages()" class="carousel5">
<li ng-repeat="slide in slides7 track by slide.id">
<div ng-style="{'background-image': 'url(' + slide.img + ')'}" class="bgimage">
Expand Down Expand Up @@ -245,7 +263,7 @@ <h3>End to End Swiping</h3>
$scope.slides6.push(getSlide($scope.slides6, 'people'));
}
}

// End to End swiping
// load 130 images in main javascript container
var slideImages = [];
Expand All @@ -265,25 +283,25 @@ <h3>End to End Swiping</h3>
$scope.totalimg = slideImages.length;
$scope.galleryNumber = 1;
console.log($scope.galleryNumber);

function getImage(target) {
var i = target.length
, p = (($scope.galleryNumber-1)*$scope.setOfImagesToShow)+i;
console.log("i=" + i + "--" + p);

return slideImages[p];
}
function addImages(target, qty) {

for (var i=0; i < qty; i++) {
addImage(target);
}
}

function addImage(target) {
target.push(getImage(target));
}

$scope.slides7 = [];
$scope.carouselIndex7 = 0;
$scope.setOfImagesToShow = 3;
Expand Down Expand Up @@ -321,7 +339,7 @@ <h3>End to End Swiping</h3>
addImages($scope.slides7, $scope.setOfImagesToShow);
console.log("no images left");
}

}

})
Expand Down
13 changes: 13 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 @@ -28,6 +28,15 @@ ul[rn-carousel] {
}
}

div.slides-per-click-demo {
ul[rn-carousel] {
width: 420px; /* wrapper created a bit bigger to show that next slide is 'on its way' */
> li {
width: 200px;
}
}
}

/* prevent flickering when moving buffer */
ul[rn-carousel-buffered] > li {
display:none;
Expand All @@ -46,6 +55,10 @@ div.rn-carousel-indicator span {
}
}

div.demo-container > div {
position: relative;
}

/* prev/next controls */
.rn-carousel-control {
transition: opacity 0.2s ease-out;
Expand Down
26 changes: 22 additions & 4 deletions src/directives/rn-carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,8 @@
intialState = true,
animating = false,
mouseUpBound = false,
locked = false;
locked = false,
slidesPerClickLimit = parseInt(iAttributes.rnCarouselItemsPerSlide);

//rn-swipe-disabled =true will only disable swipe events
if(iAttributes.rnSwipeDisabled !== "true") {
Expand Down Expand Up @@ -250,7 +251,12 @@
}

scope.nextSlide = function(slideOptions) {
var index = scope.carouselIndex + 1;
var index;
if(isNaN(slidesPerClickLimit) === false && currentSlides.length - scope.carouselIndex + slidesPerClickLimit >= slidesPerClickLimit && currentSlides.length/slidesPerClickLimit > 1) {
index = scope.carouselIndex + slidesPerClickLimit;
} else {
index = scope.carouselIndex + 1;
}
if (index > currentSlides.length - 1) {
index = 0;
}
Expand All @@ -260,7 +266,12 @@
};

scope.prevSlide = function(slideOptions) {
var index = scope.carouselIndex - 1;
var index;
if(isNaN(slidesPerClickLimit) === false && currentSlides.length - scope.carouselIndex + slidesPerClickLimit >= slidesPerClickLimit && currentSlides.length/slidesPerClickLimit > 1) {
index = scope.carouselIndex - slidesPerClickLimit;
} else {
index = scope.carouselIndex - 1;
}
if (index < 0) {
index = currentSlides.length - 1;
}
Expand Down Expand Up @@ -374,8 +385,15 @@

if (iAttributes.rnCarouselControls!==undefined) {
// dont use a directive for this
var slidesCountInCurrent = isRepeatBased ? scope[repeatCollection.replace('::', '')].length : currentSlides.length;
var noneDividableCarouselItemCount = 1;
if(isNaN(slidesPerClickLimit) === false){
noneDividableCarouselItemCount = (slidesCountInCurrent%slidesPerClickLimit !== 0 && slidesCountInCurrent/slidesPerClickLimit > 1) ? (slidesCountInCurrent%slidesPerClickLimit) : 1;
} else {
noneDividableCarouselItemCount = 1;
}
var canloop = ((isRepeatBased ? scope[repeatCollection.replace('::', '')].length : currentSlides.length) > 1) ? angular.isDefined(tAttributes['rnCarouselControlsAllowLoop']) : false;
var nextSlideIndexCompareValue = isRepeatBased ? repeatCollection.replace('::', '') + '.length - 1' : currentSlides.length - 1;
var nextSlideIndexCompareValue = isRepeatBased ? repeatCollection.replace('::', '') + '.length - ' + noneDividableCarouselItemCount.toString() : 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 || ' + canloop + '"></span>\n' +
' <span class="rn-carousel-control rn-carousel-control-next" ng-click="nextSlide()" ng-if="carouselIndex < ' + nextSlideIndexCompareValue + ' || ' + canloop + '"></span>\n' +
Expand Down
6 changes: 4 additions & 2 deletions test/unit/angular-carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ describe('carousel', function () {
useControl: false,
useBuffer: false,
nbItems: 25,
useWatch: false
useWatch: false,
useSlidesPerClick: 2
};
if (overrideOptions) angular.extend(options, overrideOptions);
var sampleData = {
Expand All @@ -61,6 +62,7 @@ describe('carousel', function () {
if (options.useBuffer) tpl += ' rn-carousel-buffered ';
if (options.useWatch) tpl += ' rn-carousel-watch ';
if (options.useIndex) tpl += ' rn-carousel-index="' + options.useIndex + '" ';
if (options.useSlidesPerClick) tpl += ' rn-carousel-items-per-slide="' + options.useSlidesPerClick + '" ';
tpl += '><li class="test" style="width:200px" ng-repeat="item in items" id="slide-{{ item.id }}">{{ item.text }}</li></ul>';
angular.extend(scope, sampleData.scope);
// var $element = $(tpl).appendTo($sandbox);
Expand Down Expand Up @@ -573,7 +575,7 @@ describe('carousel', function () {
expect(elm.find('li').last()[0].id).toBe('slide-' + scope.items[scope.items.length - 1].id);
});
});

});
// describe('delayed collection and index', function () {
// it('should follow multiple moves and buffer accordingly', function() {
Expand Down