Карусель угловая UI bootstrap 2.0.1

0

У меня проблема с uib-каруселем углового бутстрапа 2.0.1.

Я не понимаю, что произойдет... У меня был угловой бутстрап 2.0.0 с ползунком с изображениями и видео (видеогласные директивы). Все было отлично работает, тогда я делаю 2.0.1, и с тех пор ничего не работает... Даже если я откатываюсь до 2.0.0!

Проблема в том, что слайдер не меняет слайд, и я не нажимаю на индикаторы, и я не жду таймера (установленного myInterval). У вас есть идея?

Вот мой код HTML:

<div uib-carousel active = "dv.active" interval = "dv.myInterval" no-wrap = "dv.noWrapSlides" class = "carousel-container" >
                    <div uib-slide ng-repeat = "slide in dv.slides track by slide.slide_id" index = "slide.slide_id" >
                        <div ng-if = "!slide.isVideo" >
                            <img ng-src = "{{slide.slide_path}}" title = "{{slide.nom_slide}}"
                                 alt = "{{slide.nom_slide}}" width = "360" height = "280" style = "margin:auto;" >
                        </div >
                        <div ng-if = "slide.isVideo" >
                            <div class = "videogular-container" >
                                <videogular vg-theme = "slide.theme.url" vg-update-state = "dv.startStopSlideshow()" >
                                    <vg-media vg-src = "slide.source" ></vg-media >
                                    <vg-controls class = "vg-controls" vg-autohide = "slide.plugins.controls.autoHide"
                                                 vg-autohide-time = "slide.plugins.controls.autoHideTime" >
                                        <vg-play-pause-button ></vg-play-pause-button >
                                        <vg-time-display >{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display >
                                        <vg-scrub-bar >
                                            <vg-scrub-bar-current-time ></vg-scrub-bar-current-time >
                                        </vg-scrub-bar >
                                        <vg-time-display >{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display >
                                        <vg-time-display >{{ totalTime | date:'mm:ss':'+0000' }}</vg-time-display >
                                        <vg-volume >
                                            <vg-mute-button ></vg-mute-button >
                                            <vg-volume-bar ></vg-volume-bar >
                                        </vg-volume >
                                        <vg-fullscreen-button ></vg-fullscreen-button >
                                    </vg-controls >
                                    <vg-overlay-play class = "overlay-play" ></vg-overlay-play >
                                    <vg-poster vg-url = 'slide.plugins.poster' ></vg-poster >
                                    <vg-buffering ></vg-buffering >
                                </videogular >
                            </div >
                        </div >
                    </div >
                </div >
                <!-- Indicators -->
                <ol class = "custom-carousel-indicators" ng-show = "dv.slides.length > 1" >
                    <li ng-repeat = "slide in dv.slides track by $index" ng-class = " { active: dv.isActive(slide) }"
                        ng-click = " dv.setActive($index)" >
                        <img ng-src = "{{slide.slide_path}}" alt = "{{slide.nom_slide}}" width = "120px" height = "93px" >
                    </li >
                </ol >

И вот мой JavaScript:

$q.all([
                               services.getAllVideosFromMaterielId(mat_id).then(
                                   function(dataVideos)
                                   {
                                       var videos = dataVideos.data;

                                       for (var j = 0; j < videos.length; j ++) {
                                           var slide = {
                                               source    : [
                                                   {
                                                       src: "assets/videos/materiel/" + videos[j]['video_path'], type: "video/mp4"
                                                   }
                                               ],
                                               theme     : {
                                                   url: "bower_components/videogular-themes-default/videogular.css"
                                               },
                                               plugin    : {
                                                   controls: {
                                                       autoHide    : true,
                                                       autoHideTime: 5000
                                                   },
                                                   poster  : "assets/videos/posters/" + videos[j]['video_path']
                                               },
                                               slide_id  : vm.slides.length,
                                               //Pour les vidéos, slide_path correspond au chemin vers le poster de la vidéo
                                               slide_path: "assets/videos/posters/" + videos[j]['video_path'] + ".png",
                                               nom_slide : videos[j]['nom_video'],
                                               legende   : "",
                                               isVideo   : true
                                           };
                                           vm.slides.push(slide);
                                       }
                                   }
                               ),
                               services.getAllImagesFromMaterielId(mat_id).then(
                                   function(dataImages)
                                   {
                                       var images = dataImages.data;

                                       for (var j = 0; j < images.length; j ++) {
                                           var slide = {
                                               slide_id  : vm.slides.length,
                                               slide_path: "assets/images/materiel/" + images[j]['image_path'],
                                               nom_slide : images[j]['nom_image'],
                                               legende   : images[j]['legende_image'],
                                               isVideo   : false
                                           };
                                           vm.slides.push(slide);
                                       }
                                   }
                               )
                           ]).then(function()
                                   {
                                       vm.myInterval = 5000;

                                       vm.startStopSlideshow = function()
                                       {
                                           if (vm.myInterval == 5000) {
                                               vm.myInterval = 0;
                                           } else {
                                               vm.myInterval = 5000;
                                           }
                                       };

                                       vm.noWrapSlides = false;
                                       vm.active       = 0;
                                       vm.isActive     = function(slide)
                                       {
                                           return vm.active === slide.slide_id;
                                       };

                                       vm.setActive = function(idx)
                                       {
                                           vm.active             = idx;
                                           vm.slides[idx].active = true;
                                       };

                                       vm.noMateriel = false;
                                   })
                }
                else {
                    vm.noMateriel = true;
                }

Большое спасибо за помощь!

  • 0
    у вас есть ссылка на ваше приложение / сайт? лучше отлаживать
  • 0
    Нет, извините, я создаю это локально ..
Теги:
angular-bootstrap
bootstrap-carousel

1 ответ

0

Задача решена! Это была проблема совместимости с обновлением bootstrap (а не угловым бутстрапом, как я думал)! Переход на Bootstrap 3.3.7 решил проблему! : D

Ещё вопросы

Сообщество Overcoder
Наверх
Меню