html5 - How can we integrate bxslider in to Angularjs app? -
iam using bxslider in angularjs app.but when use ng-repeat not working.below angular code. in advance.
<ul class="bxslider" ng-repeat="image in vm.listfullproductdetails[0].productimage"> <li> <img src="/{{image.productimagefilepath}}" /> </li> </ul>
when remove ng-repeat , add images , works fine.how can resolve problem.below code.
<ul class="bxslider"> <li> <!--<img ng-src="/{{image.productimagefilepath}}" />--> <img src="/images/user4.jpg" /> </li> <li> <!--<img ng-src="/{{image.productimagefilepath}}" />--> <img src="/images/user4.jpg" /> </li> <li> <!--<img ng-src="/{{image.productimagefilepath}}" />--> <img src="/images/user4.jpg" /> </li> <li> <!--<img ng-src="/{{image.productimagefilepath}}" />--> <img src="/images/user4.jpg" /> </li> <li> <!--<img ng-src="/{{image.productimagefilepath}}" />--> <img src="/images/user4.jpg" /> </li> <li> <!--<img ng-src="/{{image.productimagefilepath}}" />--> <img src="/images/user4.jpg" /> </li> </ul>
the problem repeating ul tag , thereby repeating class="bxslider". causes every image wrapped within ul , treat them separate slider.
<ul class="bxslider"> <li ng-repeat="slide in slides"> <img ng-src="{{slide.src}}" alt="" /> </li> </ul>
check solution richard chu -> http://codepen.io/funkybudda/pen/pnmou
Comments
Post a Comment