How to make bxSlider work in AngularJS with ng-repeat?

Question

I am trying to update an existing dynamic web-page that gets images and titles from SQLServer database, which loaded into AngularJS ng-repeat. bxSlider works fine with static data but when it comes to data fetched from web-services with ng-repeat it shows just as image list.

I tried using the following script in header, footer and just after the bxSlider div. But it doesn't worked.

$(window).load(function () {
    $(function () {
        $('.bxslider').load(function () {
            $('.bxslider').bxSlider({
                speed: 500,
                auto: true,
                captions: true,
                slideWidth: 800
            });
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<!-----bxSlider HTML Code----------------->
<div class="bxslider" ng-controller="appCtrl">
    <div ng-repeat="tops in topStories">
       <a ng-href="article.html?url={{tops.articleURL}}">
        <img ng-src="{{tops.imageURL}}" title="{{tops.title}}">
       </a>
     </div>
</div>

bxSlider not applied to controller after loading data. How can i fix this to get perfect slider? https://bxslider.com/examples/image-slideshow-captions/

Here is a plunker (not mine) that demonstrates how to create a custom directive for bxSlider: embed.plnkr.co/wrk9cU — Pop-A-Stash
@Pop-A-Stash thank you for replay. But directive working fine with hard coded JSON data as shown in your demo. When it comes to fetch data from an asp.net web-service on fly, problem remain same. Is there a method i am missing? — R.V.Prasad Kothuri
I modified the previous example to watch the slideit attribute so that it will correctly create and destroy the slider when new day is fetched: next.plnkr.co/edit/UBaGrfDAfrVa6eJN — Pop-A-Stash

Pop-A-Stash Pop-A-Stash · Accepted Answer · 2019-04-18T14:25:52

See this example here: http://next.plnkr.co/edit/UBaGrfDAfrVa6eJN The data is moved to an async service to simulate a web service call. I make two calls, 5 seconds apart to simulate new data. Be sure to clean up the slider object when the scope is destroyed.

The key part is this link function. scope.$watch the slideit attribute for changes, and use a $timeout() to force a digest cycle.

link: function(scope, elm, attrs) {
  var slider;
  scope.$watch('slideit', function() {
    if(slider) {
      slider.destroySlider();
    }
    scope.bestDeals = scope.slideit;
    if (scope.bestDeals && scope.bestDeals.length > 0) {
      $timeout(function() {
        slider = elm.bxSlider({
          captions: true,
          auto: true,
          autoControls: true,
          slideWidth: 110,
          minSlides: 1,
          maxSlides: 6,
          moveSlides: 1,
          slideMargin: 10,
          pager: false,
          autoHover: true,
        });
      });
    }
  });

  scope.$on('destroy', function() {
    if (slider) {
      slider.destroySlider();
    }
  });
},

How to make bxSlider work in AngularJS with ng-repeat?

1 Answers