devmark / angular-slick-carousel Goto Github PK

AFAIK slick should support swiping on mobile, but I can't make it work. Is it supposed to?

Hello,

The directive is great but i face a problem in my implementation.

It seems that the slick plugin initialization if fired before ng-repeat has finished loading all the content (due probably to loading of images).

The result is that content blocks inside the slick directive are shown as normal blocks and then, after reloading the page, the slick carousel is visible normally because this time initialization occurs after ng-repeat has finished.

Do you have any clue about how to make slick wait until ng-repeat has finished loading everything ?

Thanx !!!

Hi, coud you please add a main file direction and publish the latest version to npm which you'll need to update the package.json version number.

package.json

{
  "name": "angularSlickCarousel",
  "version": "3.0.9",
  "main": "dist/angular-ui-router.js"
}

$ npm publish

Adding a main allows users to use it as a npm module in Browserify/Webpack

var angularSlickCarousel = require('angular-slick-carousel');
// or with in ES6
import angularSlickCarousel from 'angular-slick-carousel';

Otherwise it throws this error

ERROR in ./app/scripts/app.js
Module not found: Error: Cannot resolve module 'angular-slick-carousel'

Similar to kenwheeler/slick#1325:

I'm using this library in a pretty complicated way, using ng-repeats outside and inside the directive and I've been able to get everything to work in IE and Chrome. In firefox, however, it seems like the children divs are being rendered after slick has already been initialized, giving everything a width of 0. I can't seem to figure out why.

Firefox 40.0.3 screenshot:

dataCarousel.html:

<div class="ldr-carousel" ng-repeat="group in vm.centerOrder">
    <h4 class="col-xs-12">{{vm.centerMap[group]}}</h4>
    <div class="slick-loading" ng-if="!vm.loaded">
      <div class="slick-list">
        <div class="slick-track"></div>
      </div>
    </div>
    <slick class="" data="vm.carouselData[group].releasesArr"
      ng-if="vm.loaded" settings="vm.carouselData[group].slick"
      ng-class="vm.carouselData[group].slick.centerMode ? 'slick-has-center' : 'slick-no-center'">
      <div ng-repeat="release in vm.carouselData[group].slides">
        <!-- Release data -->
      </div>
    </slick>
  </div>

dataCarousel.js (only the function that is run when the directive initializes)

function initCarousel() {
  vm.loaded = false;
  vm.resultPromise
    .success(function(releaseArray) {
      angular.forEach(releaseArray, function(release) {
        // Convert strings to actual date objects
        release.releaseDates = strToDates(release.releaseDates);
        var key = release.group.name;
        if (lodash.has(vm.carouselData, release.group.name)) {
          vm.carouselData[key].releasesArr.push(release);
          vm.carouselData[key].slides.push(release);
          var rCount = vm.carouselData[key].releasesArr.length;

          var breakpoints = [{
            breakpoint: 1200,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }];
          var centerMode = (rCount > 5);
          var slidesToShow = centerMode ? 5 : rCount;
          vm.carouselData[key].slick.centerMode = centerMode;
          vm.carouselData[key].slick.slidesToShow = slidesToShow;
          vm.carouselData[key].slick.slidesToScroll = 1;
          vm.carouselData[key].slick.responsive = rCount > 1 ? breakpoints : [];
        } else {
          vm.carouselData[key] = {
            slick: {
              dots: false,
              arrows: true,
              responsive: [],
              centerMode: false,
              slidesToScroll: 1,
              slidesToShow: 1,
            },
            slides: [release],
            releasesArr: [release]
          };
        }
      });
      vm.loaded = true;
    });
}

So essentially, I'm building 6 slick configs and rendering 6 different carousels with those configs. I know it looks a bit confusing in this context, but "key" in the javascript file is the same as "group" in the HTML. If you need anymore code or clarification, I can try to get this to work in a plunkr.

Using the latest versions (slick: 1.5.8, angular-slick-carousel: 3.0.9) setting the initialSlide in options works only momentarily before the carousel changes back to the first slide.

http://plnkr.co/edit/fYIvLiX6Q6d0ZdWQYKzW?p=preview

A working example can be made using an old version of slick: 1.3.15

http://plnkr.co/edit/kENaWAIVGETbBCV8JAfo?p=preview

This directive can mostly become useful for angular users if they get to use directives such as ng-repeat to iterate on arbitrary data, for the purpose of composing the carousel.

ng-repeat however isn't guaranteed to have finished in the enclosed transcluded scope under this directive. Use $timeout to take the slickification out of the $digest cycle.

$timeout(function(){
$scope.slickConfig.method.slickGoTo($scope.index);
});

$scope.slickConfig.method.slickGoTo is not a function

Hello and thanx for the lib !

Can we still use slickHandle.slideIndex ? Because i can't make my code work for now.

My real problem is that i can use slickHandle.slickGoTo($index) inside a custom template (slickHandle belonging to another slick carousel).

The use case is two slick carousel : One for thumbs + one for large images

Cheers

When trying to use customPaging, I'm running into this error: customPaging is not defined. I can't find any code examples for it, and just passing it in as a directive isn't working. The console shows that error and nothing is rendered to DOM.

This is my code -- for reference:

<slick dots=true custom-paging="customPaging(slick, index)">
  <div verticalBar title="Population"></div>
  <div horizontalBar title="Age Gender"></div>
</slick>

and this customPaging function in my controller:

 $scope.customPaging = function(slick, index){
      return '<button class="tab">' + $(slick.$slides[index]).attr('title') + '</button>';
 };

bower search angular-slick-carousel
No results.

This works

<slick src="some-template.html"><slick>

This doesnt.

<slick src="{{templateName}}"><slick>

Any reason why?

Hello,

I'm facing the issue, that I cannot rerender slick when I bind a filter input to my ng-repeat (I use html cards).

As soon as the filter triggers, all items disappear.

Hi, I was trying to show the current index on the view using slickCurrentIndex variable and although on afterChange eventos it is updating, when I use it on view, the value was not updated. What am I doing wrong?

Best regards

I have two carousels in my page, they are inside a ng-repeat.
I need the ability to delete items from it.

Is that possible?

When I use directive in sync carousel setting when the data is updating the order tag in the carousel messing up. Or with the multiple slidesToShow setting when the data updating by Angular, all the elements not stay inside carousel but instead it move outside and display vertically.

The directive sets up a bidirectional control object on scope. This however is done only after .slick() is called on the element. Trying to leverage the control object on slick's settings::onInit throws out undefined errors related to control.<slick-method-property>. This happens because slick's onInit within the .slick() call.

Add an onDirectiveInit attribute to the directive thereby making it possible to use bidirectional control object right after instantiation. This is our solution to performing initialization on first slide element (play on a video, for instance) without asking for another hook in slick's main events API.

Needed an example with fetched items by ajax.

Hi,
it would be nice to have bower.json file to allow automatic wiring via bower’s « main » property.
Tools like "wiredep" allow to inject directly bower dependencies.

Thanks!

Hi,

  destroyAndInit = function () {
                        destroy();                     
                            init();

                    };

should be

  destroyAndInit = function () {
                        destroy();
                        $timeout(function () {
                            init();
                        }, 1);
                    };

otherwise, the late items won't be loaded properly and showing alot of double curly brace

Hi, I have created a plunkr showing the problem:
Plnkr

Basically I create a list of items with ng-repeat and each of them should execute a function on click. This happens, but only if the starting resolution is bigger than 1024, so the list does not get paginated. If the page is resized to lower than that, items are correctly paginated, but ng-click event stops working.
Also if the page starts in a lower resolution, the ng-click events are not firing.

I think this is a bug, unless you have any other ideas? Would really appreciate some help with this.

Thank you.

Hello, I found out type error.

angular.js : 1.4.5
angular-slick-carousel : 3.0.11 - 2015-09-25T12:36:39.625Z

TypeError: n.slick is not a function
    at link.l (angular-slick.min.js:8)
    at link.d (angular-slick.min.js:8)
    at Object.fn (angular-slick.min.js:8)
    at m.$get.m.$digest (angular.js:15715)
    at m.$get.m.$apply (angular.js:15986)
    at angular.js:1658
    at Object.e [as invoke] (angular.js:4473)
    at d (angular.js:1656)
    at yc (angular.js:1676)
    at Zd (angular.js:1570)(anonymous function) @ angular.js:12416$get @ angular.js:9203$get.m.$digest @ angular.js:15733$get.m.$apply @ angular.js:15986(anonymous function) @ angular.js:1658e @ angular.js:4473d @ angular.js:1656yc @ angular.js:1676Zd @ angular.js:1570(anonymous function) @ angular.js:28683a @ angular.js:3018c @ angular.js:3293

Despite using ng-repeat directive, and specifying | orderBy : photo.position the slick directive doesn't show the images in the correct order.

Would you be able to provide an example of how to set the global config for this module?

With ngdialog the config looks like:

someApp.config(['ngDialogProvider', function (ngDialogProvider) {
    ngDialogProvider.setDefaults({
        className: 'ngdialog-theme-default',
        closeByDocument: false,
        closeByEscape: false
    });
}]);

How is this possible with the angular-slick-carousel?

Thanks,
John

If you pass event handlers in slick options, e.g.

event: {
          beforeChange: function() {
            console.log("before change called");
            },
          afterChange: function() {
            console.log("after called");
            }
      }

and you change/replace the bounded data.

the event handler get registered each time the data is changed, and the previous doesn't get unregister.
which cause it to be called multiple time (as many times as you've changed data).

you can see a sample here:
http://plnkr.co/edit/qOQ1cOHVPwvxCF933lbm

click the 'update view' button multiple times to add more items to the bounded data list.
and watch the console log window while you move slides with the next/prev arrows.

After the uglify I got error
TypeError: slickness.on is not a function

Hello.

I was wondering if i can add my own angular directive or ng-template with slickAdd() function, and if possible, how to do it. Any help would be appreciated.

I am using angular slick and it is working fine. But I have to set the current slide position on run time depending on the api data. There will be some conditions. Sometime it will start from number 2 slide, sometime it can be 4 or sometime it can be from last. Depending upon the position of the data I have to set the current slider position.

How do I set it? The slickgoto is not working in that case. Please help.

In your demo app, Angular throws a "$digest already in progress" error when you press the "Update/Add" button for the first slider.

Hi, I'm using this on my view:

<slick settings="slickConfig" dots="true" infinite="true" slides-to-show="1" slides-to-scroll="1" prev-arrow="false" next-arrow="false" center-mode="true" center-padding="30px">

and then in my controller I'm using this for the settings:

$scope.slickConfig = {
      event: {
        afterChange: function (event, slick, currentSlide, nextSlide) {
          console.log('slick afterChange', 'event:', event, 'slick:', slick, 'currentSlide:', currentSlide, 'nextSlide:', nextSlide);
        }
      }
    }

The 'afterChange' event is not being fired or the directive is not getting bond to the settings object?

I see the "slickHandle.slickAdd" function is available, this seems to trigger a reinit on the slider.

However, in my case, I'm doing a $watch on my data and as soon as it changes I reloadData(newValue) in order to add the item to the ng-repeat.

This of course breaks the slider as a new item has been added without it reinitializing.

Any idea how I could do this? Once more thanks for your amazing support!

Hi, here's my issue:

1. My slider consists of 4 slides.
2. Each of these slides has a unique 'ui-view' that loads content.
3. This works fine initially, but when i try to update one of the views:
4. It doesn't do anything to the existing slide.
5. It adds another version of the updated slide outside of the slide-track.

In the Elements tab in Chrome tools i can see the 'slick-cloned' slides in 'slide-track'. However it looks like the angular inserted markup e.g. <!-- uiView:slide1 --> remains outside 'slide-track'.

Can anyone suggest how to resolve this issue? Below is how the code looks at different stages:

Original HTML:

<slick settings="slickPanels">
    <div ui-view="slide1"></div>
    <div ui-view="slide2"></div>
    <div ui-view="slide3"></div>
    <div ui-view="slide4"></div>
</slick>

Before view update:

<slick settings="slickPanels">
    <!-- uiView: slide1 -->
    <!-- uiView: slide2 -->
    <!-- uiView: slide3 -->
    <!-- uiView: slide4 -->
    <div aria-live="polite" class="slick-list draggable">
        <div class="slick-track" style="opacity: 1; width: 45000px; transform: translate3d(-1000px, 0px, 0px);" role="listbox">
            <div class="slick-slide slick-cloned" role="option" aria-hidden="false">
                <div ui-view="slide1" class="ng-scope" style=""></div>
            </div>
            <div class="slick-slide slick-cloned" role="option" aria-hidden="false">
                <div ui-view="slide2" class="ng-scope" style=""></div>
            </div>
            <div class="slick-slide slick-cloned" role="option" aria-hidden="false">
                <div ui-view="slide3" class="ng-scope" style=""></div>
            </div>
            <div class="slick-slide slick-cloned" role="option" aria-hidden="false">
                <div ui-view="slide4" class="ng-scope" style=""></div>
            </div>
        </div>
    </div>
</slick>

After update:

<slick settings="slickPanels">
    <!-- uiView: slide1 -->
    <div ui-view="slide1" class="ng-scope"></div>
    <!-- uiView: slide2 -->
    <!-- uiView: slide3 -->
    <!-- uiView: slide4 -->
    <div aria-live="polite" class="slick-list draggable">
        <div class="slick-track" style="opacity: 1; width: 45000px; transform: translate3d(-1000px, 0px, 0px);" role="listbox">
            <div class="slick-slide slick-cloned" role="option" aria-hidden="false">
                <div ui-view="slide1" class="ng-scope" style=""></div>
            </div>
            <div class="slick-slide slick-cloned" role="option" aria-hidden="false">
                <div ui-view="slide2" class="ng-scope" style=""></div>
            </div>
            <div class="slick-slide slick-cloned" role="option" aria-hidden="false">
                <div ui-view="slide3" class="ng-scope" style=""></div>
            </div>
            <div class="slick-slide slick-cloned" role="option" aria-hidden="false">
                <div ui-view="slide4" class="ng-scope" style=""></div>
            </div>
        </div>
    </div>
</slick>

Hi, I'm getting this error:

TypeError: slickness.slick is not a function
    at angular-slick.js:167
    at angular.js:17855
    at completeOutstandingRequest (angular.js:5507)
    at angular.js:5784

when trying to repeat over a list of given items, as shown in my following gist

Here's my directive definition and template: https://gist.github.com/JaKXz/367921c102b838221565

Any ideas? I'm poking around the source myself but I'm not sure where to start. Thanks in advance, @devmark !

The original kenwheeler library has many events, But I wonder how to use these events in this library. Couldn't find any docs for that.

Hello,

I'm having these issues: the slick carousel doesn't seem to load if the images take longer to load.

How can I initialize the slick carousel after the content is loaded?

If you look on my website, you will see that the images are one under the other. Here is the live exampe: http://mmswi.com/gademm/index.html#/product/51Petit

On my localhost the carousel works fine, but only after I cache it. At the first page load, the images appear one under the other.

In this other plugin (https://github.com/vasyabigi/angular-slick), I see the carousel has something like . Does your plugin have something similar?

Thanks for the help,
Mihai

Hi,

I have problem updating slick when loaded new images in to ng-repeat collection object. images are loading one under another.

thanks.

Hello.
Great job converting this to Angular, just want i was looking for.
Though, i'd like to have the option to add items to the ng-repeat array.
The case i need this for is getting the data i need to show in the carousel async, and later refresh it with the newest data, is this possible to get done ?

TypeError: slickness.slick is not a function
at angular-slick.js:167
at angular.js:17918
at completeOutstandingRequest (angular.js:5552)
at angular.js:5829

I want to use html content in my slides, is this possible?

Hi!

When upgrading from 3.1.0 to 3.1.4 the prevArrow and nextArrow used in the slick directive stopped working as they used. I was passing an id selector on them. Did this directive stop supporting these selectors through these options?

Here is a plunkr to demonstrate this:
http://plnkr.co/edit/jbyD6yHomMM0qeM5fb1N?p=preview

To do something like that:

<slick settings="slickConfig" control="slickHandle" > <div ng-repeat="slide in slides"></div> </slick>

Hi, I have total 5 images and I am showing 4 images at a time in my carousel with 1 image slide at a time. Now at the left end when I have 2nd image (i.e, on the right end I have 5th image) at the time the right navigation controller of the carousel has to be disabled and there should not be any more sliding. How can I achieve this with this slick carousel?

I am making slider with variable width and centerMode option set to true. The result is when it first load,the image will start at the center but leaves the left side empty. after a few second when the autoPlay starts, then the slider will fill the empty space.

The directive currently lacks the transclude property. Once in, users would be able to wrap in ng-repeat and other directives that operate on the scope outside of this directives isolate scope.

i see vertical stacking in firefox.
works fine in chrome.

any help?

Once found:

1. Move the repo to their account
2. Move the bower publish over to them

cc: @sbeam @rigobcastro @devmark

As announced on the project page readme on top.

May be dots's value is string！ Not changed to Boolean

<slick dots="true"></slick>

Changing a property on a data item which is bound to slick-slide, cause the slide to be deleted.

for example:

js:

    var view1 = { text: "My View1", property: 0 };
    var view2 = { text: "My View2", property: 0 };

    $rootScope.viewData = [view1, view2];

html:

<slick data="viewData">
      <div ng-repeat="view in viewData">
          <div>{{view.text}}</div>
      </div>
</slick>

when changing view1.property value, the slide element gets deleted from DOM.

Here is a plunker with an example:
http://plnkr.co/edit/iDffFOpq5s2Zmpj9q40f?p=preview

you can press the 'update view' button to make 'view*.property' change and see that the slides get removed.
click the button several times to see how it impact all slides.

TypeError: r.slick is not a function

Just added the div to my file and the config to my model...

Hi @devmark

If you check your example (index.html) and go from the first slide to the last slide you can see how to the last slide not appears correctly.

One trick is execute unFilter after initialize the slick, but is not very elegant...

I checked the jquery version, slick version and a lot of options but i don't have the correct solution.

Thanks!

Duped Info comment in dist file and version number in your generated comment is still on 3.0.2. Would be helpful for that to be synced with the actual version.