Geek Answers Handbook

How to make carousel indicators in angular ui use sketches from the model in the controller?

I am using angular ui bootstrap carousel and I want to make indicator thumbnails. I have a controller that looks like this (from the demo):

function carouselCtrl($scope) {
  $scope.myInterval = 5000;
  $scope.imgPath="img/slideshow/"
  var slides = $scope.slides = [{
    'imgName':'iguanas.jpg',
    'caption':'Marine iguanas in the Galapagos National Park on Santa Cruz Island, on September 15, 2008.',
    'author':'(Reuters/Guillermo Granja)'
  },{
    'imgName':'eruption.jpg',
    'caption':'In June of 2009, the Cerro Azul volcano on Isabela Island was in an active phase, spewing molten lava into the air, spilling it across its flanks, and widening existing lava flows.',
    'author':'(Reuters/Parque Nacional Galapagos)'
  },{
    'imgName':'bluefoot.jpg',
    'caption':'A close-up of a pair of Booby feet, photographed in March of 2008. ',
    'author':'(CC BY Michael McCullough)'
  }];

}

and the template is as follows:

<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">
    <ul class="carousel-indicators" ng-show="slides().length > 1">
        <li ng-repeat="slide in slides()" class="slide-thumb" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>

    </ul>
    <div class="carousel-inner" ng-transclude></div>
    <a ng-click="prev()" class="carousel-control left" ng-show="slides().length > 1">&lsaquo;</a>
    <a ng-click="next()" class="carousel-control right" ng-show="slides().length > 1">&rsaquo;</a>
</div>

I want to do something like this:

<li ng-repeat="slide in slides()" class="slide-thumb" ng-class="{active: isActive(slide)}" ng-click="select(slide)" style="background-image:url({{slide.imgName}});"></li>

but I have to be out of scope or something like that ... Does anyone know of any angular carousels that have a thumbnail option or how can I make this work?

+4
source share
2 answers

The slide array in the carousel template does not actually refer to the slide array that you defined in your application controller.

dom, . , , ( , ).

angular -ui, CSS-, :

  //Default styles for indicator elements
  .carousel-indicators li { 
    background-size : 42px 22px; 
    width : 42px;
    height: 22px;
    background-repeat : no-repeat;
    background-position : center;
    cursor : pointer;
  }

  // Then Specify a background image for every slide
  .carousel-indicators li:nth-child(1){
    background-image: url(http://cache.wallpaperdownloader.com/bing/img/WeddedRocks_20100418.jpg);
  }

  ...

Plunker .

+3

, . , docs uib-. , -url. .

, html :

<!--Defining the controller scope-->
<div ng-controller="carousel">
<!--Declaring the template for later usage-->
<script id="carousel-with-thumbs.html" type="text/ng-template">
<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()"
     ng-swipe-left="next()">
    <div class="carousel-inner" ng-transclude></div>
    <a role="button" href class="left carousel-control" ng-click="prev()"
       ng-class="{ disabled: isPrevDisabled() }"
       ng-show="slides.length > 1">
        <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">previous</span>
    </a>
    <a role="button" href class="right carousel-control" ng-click="next()"
       ng-class="{ disabled: isNextDisabled() }"
       ng-show="slides.length > 1">
        <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">next</span>
    </a>
    <ol class="carousel-indicators" ng-show="slides.length > 1">
        <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index"
            ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
            <!--Showing the thumbnail in a <img> tag -->
            <img ng-src="{{slide.slide.actual.thumb}}">
            <span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
        </li>
    </ol>
</div>
</div>
</script>

<uib-carousel active="active" interval="interval" template-url="carousel-with-thumbs.html">
<uib-slide ng-repeat="slide in slides track by $index" index="$index" actual="slide">
    <!--Passing the slide in the actual directive-->
    <img ng-src="{{slide.image}}" style="margin:auto;">
    <div class="carousel-caption">
        <h4>{{slide.title}}</h4>
        <p>{{slide.text}}</p>
    </div>
</uib-slide>
</uib-carousel>

, carousel-indicators:

<ol class="carousel-indicators" ng-show="slides.length > 1">
    <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }"
    ng-click="select(slide)">
        <img ng-src="{{slide.slide.actual.thumb}}">
        <span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
    </li>
</ol>

, slide slide, actual. actual, :

<img ng-src="{{slide.slide.actual.thumb}}">

, , , :

(function(){
    'use strict';
    angular
        .module('app', ['ui.bootstrap'])
        .controller('carousel', carousel);

        carousel.$inject = ['$scope'];

        function carousel($scope){
            $scope.active = 0;
            $scope.interval = 5000;
            $scope.slides = [
                {title: "Any title", text: "This is a text for the slide", image: "path/to/the/image/image.jpg", thumb:  "path/to/the/image/thumbs/thumb.jpg"},
                {title: "Any title", text: "This is a text for the slide", image: "path/to/the/image/image.jpg", thumb: "path/to/the/image/thumbs/thumb.jpg"},
                {title: "Any title", text: "This is a text for the slide", image: "path/to/the/image/image.jpg", thumb: "path/to/the/image/thumbs/thumb.jpg"}
            ];
    }
})();

, Angular UI Boostrap 1.3.3 Angular 1.5.8.

https://jsfiddle.net/logus/6mvjpf40/

0

More articles:


All Articles