vasyabigi / angular-slick Goto Github PK

it is working fine with hard coded data. but not worked with Dynamic data. using dynamic data it show vertically insted of horizontal without crowling.

Dear Vasyl,

This is Takeshi Kikuchi, and I have one question.

I have below trouble while using angular-slick.

When I feed the tag into html directly by the following code, it goes well.
...

However, I would like to write slick tag from javascript side to dynamic, could you tell me how to make it happen?

Thanks in advance,
Takeshi Kikuchi

Once the slick is displayed, you can go to the prev/next slides and they will show correctly.

This is a simple code to test this issue:

The HTML:

<div ng-controller="TestController as testCtrl">
    <div ng-show="testCtrl.mustShowCarousel()">
        <slick dots="true" infinite="false" speed="300" slides-to-show="1" touch-move="false">
            <div>Content 1</div>
            <div>Content 2</div>
            <div>Content 3</div>
        </slick>
    </div>
    <input type="button" ng-click="testCtrl.toggleCarouselVisibility()" value="Toggle!" />
</div>

The AngularJS:

"use strict";
(function(){
    var app = angular.module("slick-example", ["slick"]);

    app.controller('TestController', function(){
        this.showCarousel = false;

        this.mustShowCarousel = function(){
            return this.showCarousel;
        };

        this.toggleCarouselVisibility = function(){
            if(this.showCarousel){
                this.showCarousel = false;
            }
            else{
                this.showCarousel = true;
            }
        };
    });
})();

This is what I see when the page loads. Only de button is visible:

When I click the button, the carousel is shown, but it displays incorrectly:

When I click the dot of the second slide, the carousel displays correctly:

I am creating a slick carrosuel, but I need to create a current-index, but I put

and the index is never displayed with none value, can anyone explainme how to do this? or at least another way to.

{{index}}

Great plugin.

Is it possible to use a ng-repeat inside the slick directive or not ?

Thanx !

When I initialize two with as-nav-for pointing to each other's class, it doesn't seem to appear working: i.e. toggling one carousal doesn't trigger the other one to move. Instead, they seem to be acting independently of each other.

I need to know how to get access to the slickobject for each slick item created. it appears there is now way to get the handle for each one. Example:

Minor trouble : in slick.js, there is "slider = $(element);", which explodes on our site where $ is not defined (it must remain free for other uses), and only "jQuery" is.

To prevent collisions, how about sticking to "jQuery", or using a closure to define "$" as is often done ?

It took me some time figure out that we need to provide angular-slick with a ng-repeat of an array of div....
For example it isn't possible not to use ng-repeat ie use only existing dom content inside slick container.
Or at least it hasn't recognized my structure.
There seem to have no way to telle slick to use container with the class ....
There is a lack of documentation at the end of your description that make it hard how to start.
Even with the demo it is not self understandable

Steps to Reproduce

1. Create Yeoman Angular App (yo angular)
2. Install Angular Slick via Bower
3. Add some Slick HTML

<slick infinite=true slides-to-show=1 slides-to-scroll=1 autoplay=true>
  <div ng-repeat="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]"><h3>{{ i }}</h3></div>
</slick>

4. Confirmed autoplay working on localhost:9000 (grunt serve mode)
5. Grunt build
6. Slick autoplay not working for dist mode

There is no error message on console.

Hi!

Great directive, however I'm running into a problem whereby I need to run a method on the plugin (slickGoTo in this case) and I'm not sure how to go about doing that.

Basically rather than using the arrows the plugin generates I've made my own buttons which should toggle between two slides. Take the following markup as an example:

<div ng-repeat="thing in someThings">
    <div class="portal-box font-gray">
        <slick dots="false" arrows="false" draggable="true" infinite="false" autoplay="false" speed="700" slides-to-show="1" swipe-move="false" slides-to-scroll="1">
            <div class="slide">
                <p>First slide content</p>
                <button>Go to next slide</button>
            </div>
            <div class="slide">
                <p>Second slide content>
                <button>Go to previous slide</button>
            </div>
        </slick>
    </div>
</div>

How would I make the two <button>'s contained within the slides toggle each slide?

Help is appreciated. :)

How you can use this with kind of photo grid? Multiple photo rows, and can be browsed with single arrow. Images are implemented by ng-repeat
This aint workin:

<slick lazy-load="ondemand" arrows="true" slides-to-show="5" slides-to-scroll="1" init-onload="true" data="photos">
    <div class="sq-photo-grid" id="primary_photo" data-ng-repeat="photo in photos">
<img class="" ng-Click="click2('{{photo.image.big}}');"  class="photo" ng-src="{{photo.image.sq}}"></img>
</div>
<div class="sq-photo-grid" id="secondary_photo" data-ng-repeat="photo in photos">
<img class="" ng-Click="click2('{{photo.image.big}}');"  class="photo" ng-src="{{photo.image.sq}}"></img>
</div>

and these in carousel scripts.js file

$('#primary_photo').slick({
dots: true,
slidesToShow: 2,
slidesToScroll: 2,
// onBeforeChange switches both at the same time
// but current is set before the animation
// so the secondary row goes backwards
onAfterChange: function (slider) {
current = $('.primary_photo').slickCurrentSlide();
$('.secondary').slickGoTo(current);
}
});

$('#secondary_photo').slick({
    slidesToShow: 2,
    slidesToScroll: 2,
    draggable: false,
});

The autoplaySpeed setting doesn't work. Can anyone help with this? Not sure what's wrong. It's stuck on the default value.

I'm calling angular slick in a directive:

<slick slides-to-show="1" slides-to-scroll="1" touch-move="false" swipe="false" arrows="false" pauseOnHover="false" autoplay="true"  infinite="true"     draggable="false" lazyLoad="ondemand" data="slideImages" autoplaySpeed="6000" speed="1000" fade="true" class="hero-slider lazy">
    <div ng-repeat="image in heroImages" class="hero-image" style="background-image:url({{image}})"></div>
</slick>

EDIT: Nevermind, didn't put dashes in the parameters in the directive...
For whoever else over looks this, anything that uses camelcase ex) lazyLoad or autoplaySpeed, needs to have a dash (-) instead of the camel cased letter, ex) lazy-load, autoplay-speed. It's an angular thing.

I tried using ng-click to call a function, but could not find a way to use slick method slickGoTo().
Can someone please suggest it should be done correctly?

Hi Folks,
Is that possible to lazy load my urls?. From slick.js i can able to see that, we can lazy load only images.
But, my requirement is to lazyload url's on click of carousel.

I will include url's to page like below:
div ng-repeat="item in items">

Hi,

I'm trying to use the directive with my own one which retrieves the images from my server. The animation isn't working - could you take a look to see if there's an obvious solution?

Here's the mark up calling the directive

I've then got my own directive called "slider" which gets the images from the server (using the section attribute to help identify them) and in the template url of the directive I'm doing this

"

I also tried putting the slick directive in my own template url and calling my directive this way

"

but neither are working - the images display but the animation isn't working.

The dynamic reload provided by a watcher shows me a little problem after reload more than 2 times the data scope variable:

TypeError: Cannot read property 'ng-leave' of undefined
    at HTMLDivElement.<anonymous> (angular-animate.js:1379)
    at HTMLDivElement.jQuery.fn.extend.on.fn (jquery.js:4850)
    at HTMLDivElement.jQuery.event.dispatch (jquery.js:4430)
    at HTMLDivElement.jQuery.event.add.elemData.handle (jquery.js:4116)
    at Object.jQuery.event.trigger (jquery.js:4345)
    at jQuery.fn.extend.triggerHandler (jquery.js:4902)
    at Function.jQuery.cleanData (angular.js:1557)
    at jQuery.fn.extend.remove (jquery.js:5253)
    at c.b.destroy (slick.min.js:18)
    at HTMLDivElement.<anonymous> (slick.min.js:18)

After some tests I realized that we should clean the watchers before recreate them.
Has anyone been having this kind of problem?

Thanks in advance.

Have you tested for memory leaks?
Official slick plugin suggests unslick() function to remove which is never called from your code.
Unfortunately code is written in coffeescript, no way to contribute :)
Directive should contain:
scope.$on("$destroy",function(){
$(element).unslick();
});

I have a ng-click on my individual slides that will take users to a different page when clicked. I also have the responsive attribute setup following the example application. I used the example application bundled with angular-slick as a baseline.

When my view first loads, everything works correctly. I can click the hyperlink and receive the click event. However, if I change the size of the browser window that triggers one of the breakpoint settings, then the ng-click events no longer gets fired.

Does anyone know how to work around this issue or to allow the angular framework to re-watch for the ng-click events?

I have a plnkr here that demonstrates the issue. Just run the plnkr, then resize the browser or the panel. I think the slick.js library is doing a destroy and recreation of the html and angular does not have a chance to re-apply its watch for the ng-click events.

http://plnkr.co/edit/FCeE8AejXsjxWh6WR1wd

My View:

Current index: {{ index }}

    </slick>

My Controller:
$scope.clickTheThing = function(theIndex) {
console.log('clicked index' + theIndex);
alert('clicked index' + theIndex);
}

    return $scope.breakpoints = [
      {
          breakpoint: 768,
          settings: {
              slidesToShow: 2,
              slidesToScroll: 2
          }
      }, {
          breakpoint: 480,
          settings: {
              slidesToShow: 1,
              slidesToScroll: 1
          }
      }
    ];

centerMode is not applying the slick-center class, meaning it isnt working. Is this parameter supported in angular-slick?

is the below correct?
<slick centerMode='true'

Hey, I just pulled version 0.1.13 and directive doesn't work. The dots turned into 'undefined' and I don't have any slides. I thought it was my fault but I downloaded whole repository and ran it on my computer - it still doesn't work. I think you should check that.

I'm having trouble creating a second caroussel on the same page.

My first caroussel is display when the page is loaded. It is place inside a collapse component.. The second one is a collapse later.

Both caroussel seem to be initialized at first, but when the second one is display the layout is not applied.

It might be related to kenwheeler/slick#187

As anyone run across that issue?

There's no indication of what license you're releasing this code under, it would be great if you could state that either in the readme or by adding a LICENSE file with the text of the license you've chosen.

I cannot use the code in my current project unless it is licensed under an Open Source license that is compatible with the project. The MIT License would be preferred.

I have multiple elements inside each slide with ng-click's attached to them. They all seem to be disabled. Anyone know how I can enable them or possible workarounds?

Please add option from original - Slider Syncing

Slick includes a flag called swipeToSlide that is not currently supported by the angular-slick directive.

This is from the slick documentation:

swipeToSlide
Type: boolean
Default: false
Allow users to drag or swipe directly to a slide irrespective of slidesToScroll.

It seems to have been overlooked in the development of the directive. The only changes that need to happen are:

...
scope: {
    ...
    swipeToSlide: '@',
    ...
}, 
link: function (scope, element, attrs)  {
    ...
    initializeSlick = function () {
        ...
        slider.slick({
            ...
            swipeToSlide: scope.swipeToSlide === 'true'
            ...
        });
        ...
    };
}
...

Ability to overwrite them, according to slick docs here.

Can do PR for that.

Maybe I'm just having a slow week, but can anyone else get the onBeforeChange and onAfterChange events to fire? I tried adding the attribute and function in every way I could think of and couldn't get it working... :(

How can I use before change event of slick?
Here is what I implemented.

...

// js file
$scope.headerSliderChanged = function() {
console.log('test');
}

but it doesn't print "test". What do I have to do?

Check in IE8:

Original - http://kenwheeler.github.io/slick/

Angular - http://vasyabigi.github.io/angular-slick/

$(element).document.ready() is executing earlier than ng-repeat is doing the logic. (possible when async loading collection). please use $timeout for this as solution,

Hi Friend,
after version 0.1.11 the responsive on the slick slider stop working..
I could not understand why .. maybe you will understand.

An example of how I used it:

    <slick
        slides-to-show=4
        arrows=true
        responsive="miniGalleryResponsive"
        on-directive-init="onDirectiveInit()"
    >

the controller :

    $scope.miniGalleryResponsive = [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 4,
                slidesToScroll: 4
            }
        },
        {
            breakpoint: 980,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 1
            }
        },
        {
            breakpoint: 767,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1
            }
        },
        {
            breakpoint: 500,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
    ];

Good Luck..
p.s you did a great job with this library 👍
Elior

I have an ng-repeat inside of a slick carousel with a limitTo filter applied. The idea is the user will be able to click a button on the last slide to show more slides which sets the filter limit to a higher value, however changing the limit results in the carousel breaking and showing a vertical list of results instead of the carousel. This occurs whether the limit is raised or lowered.

Any work around for this?
Is there a way to force the carousel to reinitialize?

at first the data is shown in a broken way for a split second
then it is shown well
is there any way to hide the content at first and after all was prepared to show it?
a callback in which i can set setVisible to true?

When I try to execute $ grunt test, the task complains about the karma.conf.js not being present.
Can this file be added to the repository?

Thanks

Setting an InitialSlide param breaks the slideshow. Will set up a PR in a bit to fix this issue. It's an issue with slick issue #396.

https://github.com/vasyabigi/angular-slick/blob/master/app/scripts/app.coffee#L92

How can I use the lazy loading feature (adding the data-lazy attribute) with a binding:

<slick lazy-load='ondemand' slides-to-show=3 slides-to-scroll=1 class="slider lazy">
    <div ng-repeat="video in popularVideos"><div class="image"><img data-lazy="{{video.thumbnails.regular200x110.url}}"/></div></div>
</slick>

The above code doesn't work.

Can you pass the index and element parameters to the OnAfterChange property? I can send a pull request if that is useful.

when I resize the browser, the slick carousel is not resizing properly. Usually going from small to big, it keeps the width set too small on the slick-list and then you can't see the content. It also keeps the slick-slide width set too small.

Hi,

When i try to recreate my slick, i got this error :

TypeError: undefined is not a function at slick.js:60

The solution seems to replace

 slider.unslick();

With

slider.slick("unslick");

But maybe there is an issue that I haven't thought

Hey,
I want to enable or disable autoplay for my slider from outside, so I tried to bind a variable, called slideRunning to the attribute "autoplay" but it does not work. Does anyone have an idea?

Hi,

I've been trying to use the directive with my own one which retrieves the images from my server. What's the best way to do this? The way I'm doing it displays the images but the animation isnt working.

Here's the mark up calling the directive

<slick autoplay="true" arrows="true" dots="true" class="slider" section="page"></slick>

I've then got my own directive called "slider" which gets the images from the server (using the section attribute to help identify them) and in the template url of the directive I'm doing this

`

I also tried putting the slick directive in my own template url - but neither work. The images display but the animation doesn't work.

I've put together a fiddle where I'm trying to fire an alert using slick's onAfterChange, but unfortunately it is not firing. Any thoughts?

http://jsfiddle.net/skeathly/3r0tc0as/10/

How do you specify responsive? I've tried it as a $scope variable and straight in the directive and neither of them seem to work.

I'm using init-onload="items" because my slides are inside an ng-repeater.

The trouble is that since I changed the slides from static to Angular/repeater I find that all of the slides flash in a column before being initialized into a row. This doesn't seem to happen when they are hard coded as static slides in the HTML. Does anybody know how this can be fixed?

Here is a snippet of my code but for some reason it is not working.

angular.module('portfolioModule.controllers')
.controller('PortfolioController', ['$rootScope', '$scope', function($rootScope, $scope){
$scope.prevArrow = '+';
$scope.nextArrow = '+';
...
...
);

It would be great if i didn't have to navigate back to the original slick website every time I wanted to see settings that are available to slick! Right now, the slick website has the following tabs: demos, usage, settings, and get it now. On angular-slick, you have: download and github. I think it would be a great addition to include the usage and settings tabs! I know it's not a super important issue, but it'd be a very nice convenience! It took me a while to realize I had to go to the original slick website to find the settings (I realize now that you mention that at the bottom of your website, but I was blind to it before).