revolunet / angular-carousel Goto Github PK

We have an issue using the carousel - and it only occurs in our testing for iOS 7 :(

Here is a sample: https://demo.christianweyer.net/repro/index.html
A Fiddle does not show the issue, BTW.

Please try to hit the URL with e.g. an iPad or the simulator. Some (most) images are not showing up although all of them are loaded (can be seen via the browser web inspector).

Any idea what is wrong here?

Thanks.

we use a deep $watch on the ngRepeat collection for 2 reasons :

• track the collection changes (elements added or removed)
• dimension the container based on the first <li> item dimensions

This causes perfs issues on big collections

we should remove the watch asap and use a non-deep watcher to reference the collection

This directive works fine if I remove rn-carousel-buffered, but when rn-carousel-index and rn-carousel-buffered both exist on an element, I get an error. I will try to write a test for this a little later (and maybe a PR). I'm using Angular 1.1.4.

<ul rn-carousel rn-carousel-index="5" rn-carousel-buffered>
  <li ng-repeat="page in pages">{{page}}</li>
</ul>

Stacktrace:

TypeError: Cannot call method 'slice' of undefined
    at Object.<anonymous> (angular-carousel.js:13:18)
    at fnInvoke (angular.js:6601:21)
    at OPERATORS.| (angular.js:6218:59)
    at extend.constant (angular.js:6547:14)
    at Object.$watchCollectionWatch (angular.js:8407:22)
    at Object.watchExpression (/#/articles/tag%253Ablogger.com%252C1999%253Ablog-7159470537406093899.post-8500912369013786441?index=11:743:29)
    at Object.Scope.$digest (angular.js:8563:38)
    at Object.$delegate.__proto__.$digest (/#/articles/tag%253Ablogger.com%252C1999%253Ablog-7159470537406093899.post-8500912369013786441?index=11:833:31)
    at Object.Scope.$apply (angular.js:8771:24)
    at Object.$delegate.__proto__.$apply (/#/articles/tag%253Ablogger.com%252C1999%253Ablog-7159470537406093899.post-8500912369013786441?index=11:844:30) 

sur la demo flickr:

• modif effet de zoom
• loader modale
• metas apple home screen
• metas viewport
• préparer images coté srv pour améliorer les perfs
• multiples templates
• touchmove+click fix

The problem with duplicated first slide occurs in Firefox (ver.22).

To solve the problem just comment/remove line 136 (line 136: carousel.css('transform', '').css(translateSlideProperty(getTransformCoordinates(carousel[0]), false));).

I suppose the real problem lies in getTransformCoordinates method.

I'd made plunker example to reproduce the problem.

1. Click twice or more on New item link. It will unshifts to start of data array some new values.
2. Nothing updated in carousel.
3. Nothing updated in carousel even when you click on Prev or Next links.
4. Click Toggle trick which is actives mode when data array completly replaced by angular.copy each time new element created.
5. All (1/2/3) works now as should.

Plugin does not monitor changes on existent data object reference as espected, as angular works by default.

Quick fix is to do trick but its redraws ALL elements per operation that is unacceptable in some cases (which is mine).

Hi

When the carousel-container width is calculated there are two pixels missing compared to the translation for each slide. This makes almost no difference if you have just a few slides. But if you have 28+ slides, like I do, it soon makes a very noticeable difference. Each slide gets offset to left the farther into the deck I slide. If I increase the carousel container width +2px (by inspecting the element in chrome), it works fine.

This is also evident on you demo page. Below is after swiping the first slide left.

<div id="carousel-1" class="carousel-container" style="width: 398px;">
 <ul carousel="" class="image ng-scope carousel-slides carousel-animate" 
style="-webkit-transform: translate3d(-400px, 0, 0);">

Sorry for spamming with issues, keep up the good work. :)

I'm seeing a flicker of the previous slide when using an infinite carousel and swiping from previous slide to next.

I see it using the iPad in chrome and safari on this page:

http://blog.revolunet.com/angular-carousel/demo/infinite2.html

I see something like it in my own app with chrome on android (galaxy s4.) however on I don't see it on the demo page above.

I don't see this problem on iphone4 safari on the demo page nor in my app.

In my app (which is just displaying an image on each slide) with the android phone i very clearly see the previous slide for a moment, though this only happens for slides newly added by the infinite next/prev callbacks, however on the iPad it happens on every slide.

Anyone having similar issues? any thoughts on how to go about debugging the issue?

As we want the carousel to display infinite lists, and also because of mobile performance, we should add a buffer option to the carousel.

The buffer should simply slice the ng-repeat and display n items.

ng-repeat expression parser examples :

• http://www.bennadel.com/blog/2457-Accessing-scope-On-The-DOM-Using-AngularJS.htm
• https://github.com/davecoates/angular-ui-sortable/blob/master/directives/sortable.js

Parsing the ngrepeat expression may also help for the indicator

1. bower install error:
2. git clone git://github.com/angular/angular-carousel.git don't contain css
3. need dependencies: ngMobile, but don't mention at readme

D:\Workspace\Code\9game\sklrassistant>bower install angular-carousel
bower cloning git://github.com/angular/angular-carousel.git
bower caching git://github.com/angular/angular-carousel.git
bower fetching angular-carousel
bower checking out angular-carousel#27a0bb766c7ce48ff44978f8108c489071b227be
bower warn Package angular-carousel is still using the deprecated "component.json" file
bower copying C:\Users\TZ\AppData\Roaming\bower\cache\angular-carousel\76c7a29d213308d041cd857d3709d20d
bower cloning git://github.com/angular/bower-angular.git
bower caching git://github.com/angular/bower-angular.git
bower fetching angular
bower checking out angular#v1.0.6
bower copying C:\Users\TZ\AppData\Roaming\bower\cache\angular\ef2188def21eb1bbd1f1792311942a53
bower installing angular#1.0.6
bower installing angular-carousel#27a0bb766c7ce48ff44978f8108c489071b227be
bower error EPERM, rmdir 'D:\Workspace\Code\9game\sklrassistant\src\app\components\angular-carousel\.git\logs\refs'

There were errors, here's a summary of them:
- angular-carousel EPERM, rmdir 'D:\Workspace\Code\9game\sklrassistant\src\app\components\angular-carousel\.git\logs\refs'

when page auto reload the carousel automatically redirect to the first slide. means if I am on slide No. 3 and if page get refresh automatically then carousel also is redirecting to slide No.1

how to set carousel on current slide on page reload.

Get:
Object # has no method 'slice'

So I suppose its works only with arrays, but ng-repeat works great with objects.

need to add some description at indicator and align the point to right.

use requestAnimationFrame instead of a throttle when touchmove

I may have made a schoolboy error, but it seems to me that I cannot use orderBy to sort in conjunction with the carousel? I created a sample from your simple demo page, by adding data to sort by, but it generates a "Error: 10 $digest() iterations reached." error. I can't attach the sample here unfortunately. I put the key parts in jsFiddle: http://jsfiddle.net/HcJnd/ but it doesn't run at all there. Sorry.

When the carousel collection is finite (not using getPrev/getNext) we could enable a cycle mode where the carousel cycle through all the slides infinitely.

When using the infinite carousel directive, we should always remove the items from memory and only keep bufferSize

Is there any workaround to make the carousel item position has two-way data binding with $routeParams? So if I swipe the carousel, it will change carousel item position as well as the $routeParams.

Thanks

var liAttribute = tElement.find('li')[0].attributes['ng-repeat'], got error when using data-ng-repeat or x-ng-repeat

support autoChange param to auto change slide.

I had try:

<div class="carousel-container" style="height:{{cfg.screen.scrollImgHeight}}px;">
  <ul rn-carousel rn-carousel-index="adIndex" rn-carousel-indicator>
    <li ng-repeat="adInfo in adList" data-ng-click="gotoPage(adInfo.alink)">
      <img data-ng-src='{{adInfo.logo}}' style="height:{{cfg.screen.scrollImgHeight}}px; width:100%"/>
      <!-- <div class="label">{{adInfo.title}}{{adIndex}}-{{$index}}</div> -->
    </li>
  </ul>
</div>

    $scope.adList = [];
    $scope.adIndex = 0;
    var autoScroll=function(){
      $timeout(function(){
        $scope.$apply(function(){
          $scope.adIndex = $scope.adIndex >= $scope.adList.length-1 ? 0 : $scope.adIndex+1
          console.log($scope.adIndex)
        })
        autoScroll()
      },2000)
    }

console.log output the new index but slide don't change.

and when using angular.element($0).scope().$apply(function(){angular.element($0).scope().adIndex=2}) ($0 is scope005) at chrome, the slide change well.

After an angular update the ng-repeat on

Hi Revolunet, Great Carousel! We are interested in using it for our project, but no support for <IE10 is a problem for us.

I note (with interest) your todo comment around line 149 "todo : use non-3d version for browsers not supporting it". I tried to see if I could use modernizr to make it work for IE9:

carousel.css(translateSlideProperty(getTransformCoordinates(carousel[0]), Modernizr.csstransforms3d));

...but it didn't work for me and of course 2d transform isn't supported in any case by <IE9 .

What are your plans for <IE10 support?

Thanks in advance.

I also modified it to use class="ul" and class="li" so that I could use divs instead of ordered list, to make it play nicely with some other software we are using. Might be nice to be able to specify a selector for parent and an optional selector for child elements (defaulting to any immediate child of the parent).

we shouldn't animate the carousel intially

Currently the rn-carousel-next and rn-carousel-prev directives need new items to be returned, which leads to disconnection between the initial array of carousel's ng-repeat and the carousel's collection. For example in the 'infinite carousel' demo, the 'pages' array only contains the first five slides, and new slides are never added to it.

It would be nice to be able to append/prepend slides directly to the model (i.e. the 'pages' array in this case). This already works for appending, although it relies on the inefficient deep watch on carousel collection. Prepending causes the carousel to switch to a different slide.

useful to know this is a carousel :)

Hi,
First, nice work.

I have an issue when the variable who store images is set after the page load.
The carousel width and height was not set correctly.
I ultimately a long and small width.

How can we redefine carousel's proportion after the change of the variable who store images ?

we should detect mouseleave on the carousel container and cancel the swipe if out of zone.

For the moment its webkit only

I know that you have cleared that this plugin is for Mobile. But if I need to use it for IE 8/9, then Were I need do change in JS file? Just give some reference so I will focus on it.

Hi,

the screen freezes, when touch moving.
This occurs only on Android devices, on IOS it works fine.

If we have a buffered carousel and receive the new slides while transitioning, this can shift the visible slides which is not desired, and also shift the whole indexes.

If we detect an ongoing transition, we should wait until it finishes before updating the buffer.

• améliorer menu snap (gauche) : traits parasites entre les sections
• contenu : mettre du contenu PRO : immobilier, luxe (bijoux, montres...)
• icones : faire plus fin, mettre une icone info a la palce de "?"
• centrage horizontal loader
• pb bandes blanches a droite et en bas
• loader de fond des images pdt que ca charge pour la modale
• icone infos : préparer modale avec infos revolunet

See header. We need some like this:

<ul rn-carousel>
  <li><our-direcitve1/></li>
  <li><our-direcitve2/></li>
  <li><our-direcitve3/></li>
</ul>

No ng-repeat. No watching on collection. Just static initialization like in example above.

Any suggestions?

dans le dossier demo/flickr-full, améliorer le design :

• toolbar du haut
• layer des images
• menu de gauche
• loader (doit etre en css3)

autres idées ?

When using mouse, and releasing outside of the carousel, the slides are sticked to the mouse. regression from 8d268cd

Hi,

when swiping on mobile devices the picture is stood when you move your finger out of the picture area during the swipe process.

I get the error:

Uncaught TypeError: Property 'getWidth' of object [object Object] is not a function angular-carousel.min.js:8
E angular-carousel.min.js:8
(anonymous function) angular.js:2032
forEach angular.js:151
eventHandler

My HTML:

<ul carousel class="hero-unit">
  <li ng-repeat="question in questionsResponse.questions" style="width: 300px">
    {{ question.text }}
  </li>
</ul>

There also seem to be debugging enabled for any mouse event, in the minified version in github.

thanks for the awesome work. How do you change the buffer amount

Feature request:

When changing orientation, the carousel would recalculate it's width. I do not have to reload the page to get correct size.

/Magnus

the current throttle value of 100 seems to be to high for iPads. A value of 10 allows smooth swipes.

Watch the demo:
http://blog.revolunet.com/angular-carousel/

Screen:
http://screencast.com/t/AL8PjmI6GM

Awesome, plugin. Quick question, is is possible to to enable scrolling?

When there is a clickable element like a button on a carousel slide and a swipe is release on this element a click is performed.

Expected result: If the user performs a swipe all click events should be cancelled.

I tested this on a PC with a mouse.

I will only talk about the behaviour on Chrome 29.

The CSS property -webkit-backface-visibility: hidden; backface-visibility: hidden; is used on li.

From what I though maybe it was used to force the browser to create a hardware accelerated layer for each li. The problem is all elements with located on top of it by using position absolute or relative will also have their own layer (you can see this by enabling show composited border layers in Chrome dev tools). In the end it can cause the creation of too many layers which can lead to performance issue especially on mobile when the browser needs to composite layers. If we remove this CSS property everything gets back to normal and I did not notice changes of the behaviour on the carousel. So, the question is this CSS property is really required?

I get this very randomly, say every 50 slide swipes or more, so I'm not sure how to isolate the problem. Testing on Galaxy Tab 2 in Phonegap, Logcat gives the following:

06-14 02:45:39.661: E/Web Console(883): TypeError: Cannot set property 'transform' of undefined
06-14 02:45:39.661: E/Web Console(883): at forEach.css (file:///android_asset/app/components/angular/angular.js:1806:27)
06-14 02:45:39.661: E/Web Console(883): at Object.JQLite.(anonymous function) as css
06-14 02:45:39.661: E/Web Console(883): at updateSlidePosition (file:///android_asset/app/components/ng-carousel/angular-carousel.js:223:22)
06-14 02:45:39.661: E/Web Console(883): at Object.fn (file:///android_asset/app/components/ng-carousel/angular-carousel.js:148:15)
06-14 02:45:39.661: E/Web Console(883): at Object.Scope.$digest (file:///android_asset/app/components/angular/angular.js:7896:27)
06-14 02:45:39.661: E/Web Console(883): at Object.Scope.$apply (file:///android_asset/app/components/angular/angular.js:8097:24)
06-14 02:45:39.661: E/Web Console(883): at Object.$swipe.bind.end (file:///android_asset/app/components/ng-carousel/angular-carousel.js:272:23)
06-14 02:45:39.661: E/Web Console(883): at HTMLUListElement. (file:///android_asset/app/components/ng-carousel/angular-mobile.js:109:39)
06-14 02:45:39.661: E/Web Console(883): at file:///android_asset/app/components/angular/angular.js:1972:10
06-14 02:45:39.661: E/Web Console(883): at Array.forEach (native):5704

The carousel freezes visually after this, but swipe events are still triggered as normal.

I know that you have cleared that this plugin is for Mobile. But if I need to use it for IE 8/9, then Were I need do change in JS file? Just give some reference so I will focus on it.