Ng repeat not working in kenwheeler - Angular Js

Question

Hi I am using kenwheeler slick carousel but when I use ng-repeat on the div i get `listed images'.

What I a doing wrong here ?

<section class="regular slider" style="clear: both" ng-if="slides">
  <div ng-repeat="slide in slides">
    <img src="{{slide.path}}">
  </div>
</section>

I tried the solutions provided here angular slick although its different but still no proper images are being displayed. without ng-repeat it works perfect.

The output is something like this image

My controller

$scope.single_product = function (product_id) {
        $http.get('abc',
                {headers:
                            {'Content-Type': 'application/x-www-form-urlencoded',
                                'Authorization': $rootScope.keyword_auth_token}
                })
                .success(function (data) {
                    $scope.product = data;
                    $(".regular").slick({
                        dots: true,
                        infinite: true,
                        slidesToShow: 3,
                        slidesToScroll: 3,
                        autoplay: true,
                        autoplaySpeed: 2000
                    });
                })
                .error(function (data) {
                    console.log(data);
                });
    };

I am including slick.css slick-theme.css and slick.jshere is the link to all Files

You are able to get images but in a list right? Not side by side? — Ram_T
– Ram_T, Commented Dec 29, 2016 at 12:32
Can u share some code which actually contains your controller? — Shankar Shastri
– Shankar Shastri, Commented Dec 29, 2016 at 12:33

Santosh · Accepted Answer · 2016-12-29 12:31:00Z

2

Instead of src Use ng-src ng-src use to get the path of image in angularJS

answered Dec 29, 2016 at 12:31

Santosh

3,8975 gold badges47 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Usman Iqbal Over a year ago

did it before no success

Ram_T · Accepted Answer · 2016-12-29 12:43:30Z

1

Go through this link carefully and apply styles http://kenwheeler.github.io/slick/

remove div that contains ng-repeat

<section class="regular slider" style="clear: both" ng-if="slides">
    <img ng-repeat="slide in slides" ng-src="{{slide.path}}">
</section>

edited Dec 29, 2016 at 12:43

answered Dec 29, 2016 at 12:34

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

4 Comments

Usman Iqbal Over a year ago

I told in my question there is no css issue, I get listed images only when i apply ng repeat otherwise its perfecto

Usman Iqbal Over a year ago

still the same output

Ram_T Over a year ago

Please include all styles.css and js source files that are related to slick

Usman Iqbal Over a year ago

see the files please

Naghaveer R · Accepted Answer · 2016-12-29 12:35:51Z

Use ng-src

var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
  $scope.slides = [{
    path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
  }, {
    path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
  }, {
    path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <section class="regular slider" style="clear: both" ng-if="slides">
    <div ng-repeat="slide in slides">
      <img ng-src="{{slide.path}}">
    </div>
  </section>
</div>

Sai · Accepted Answer · 2016-12-29 12:36:57Z

0

Try this:

<div ng-repeat="slide in slides">
  <img ng-src="slide.path">
</div>

answered Dec 29, 2016 at 12:36

Sai

2,6685 gold badges34 silver badges49 bronze badges

Comments

ranakrunal9 · Accepted Answer · 2016-12-29 12:43:25Z

0

Check angular-slick README and include all css and js. Add slick to your angular.module [ let say MyApp ] dependency and use slick directives. I think you missed to use slick directives.

<section class="regular slider" style="clear: both" ng-if="slides">
  <slick slides-to-show=3 slides-to-scroll=3>
    <div ng-repeat="slide in slides">
      <img src="{{slide.path}}">
    </div>
  </slick>
</section>

edited Dec 29, 2016 at 12:43

answered Dec 29, 2016 at 12:40

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

1 Comment

Usman Iqbal Over a year ago

I am not using angular js slick man i am using the slick which I have mentioned in my question

Collectives™ on Stack Overflow

Ng repeat not working in kenwheeler - Angular Js

5 Answers 5

1 Comment

4 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related