Как мы можем интегрировать bxslider в приложение Angularjs?

Question

Как мы можем интегрировать bxslider в приложение Angularjs?

0

Я использую bxslider в приложении Angularjs. Но когда я использую ng-repeat, он не работает. Ниже приведен угловой код. Заранее спасибо.

<ul class="bxslider" ng-repeat="image in vm.listFullProductDetails[0].ProductImage">
                                            <li>
                                                <img src="/{{image.ProductimageFilepath}}" />

                                            </li>

                                        </ul>

Когда я удаляю ng-repeat и добавляю некоторые изображения, он отлично работает. Как я могу решить проблему. Ниже приведен код.

<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>

VJS 31 март 2016, в 07:32

Источник

Теги:

angularjs

html5

bxslider

1 ответ

Ещё вопросы

VJS · Accepted Answer · 2016-04-06T10-08-00.000Z

Проблема в том, что вы повторяете тег ul и тем самым повторяете class= "bxslider". Это заставляет каждое изображение обертываться внутри ul и рассматривать их как отдельный слайдер.

            <ul class="bxslider">
               <li ng-repeat="slide in slides">
                 <img ng-src="{{slide.src}}" alt="" />
               </li>
              </ul>

Проверить это решение Richard Chu → http://codepen.io/funkybudda/pen/pnmou