Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Implementing Slider with Angular UI Bootstrap

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 2.48k
    Comment on it

    To create slider with angular UI, carousel is used as it is same as bootstrap's image carousel. But It also supports swiping in the touch devices. ngTouch is used to enable the swiping in the touch devices. We have to load ngTouch module as a dependency.

    Syntax:
     

    <uib-carousel>
        <uib-slide></uib-slide>
    </ uib-carousel>

    uib-carousel has the following attributes:

    * active - It defines the Index value of current active slide It is by default of first slide.
    * interval - It is the time period between the two slides to show.
    * no-pause - If its value is true it will disable the pause on mouseover.
    * no-transition - If its value is true it will disable the transition.
    * no-wrap - It will disable the looping of slides if true.

    * template-url - If template would be used on the component.

     

    Example:

    HTML:

    <div ng-controller="CarouselCtrl">
        <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
          <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
            <img ng-src="{{slide.image}}" class=img-responsive>
            <div class="carousel-caption">
              <h4>Slide {{slide.id}}</h4>
              <p>{{slide.text}}</p>
            </div>
          </uib-slide>
        </uib-carousel>
      </div>

     

    JavaScript:

    angular.module('ui.bootstrap.demo').controller('CarouselCtrl', function ($scope) {
      $scope.myInterval = 5000;
      $scope.noWrapSlides = false;
      $scope.active = 0;
      var slides = $scope.slides = [];
      var currIndex = 0;
    
    $scope.addSlide = function() {
        var newWidth = 600 + slides.length + 1;
        slides.push({
          image: 'http://lorempixel.com/' + newWidth + '/300',
          text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
          id: currIndex++
        });
      };
    
    for (var i = 0; i < 4; i++) {
        $scope.addSlide();
      }
    });

     

 1 Comment(s)

  • I am trying to find a way to reverse the order of the array going into this directive. They typical orderBy:'index':reverse=true is not working, nor are other things I have tried. For example, I want index 2 to show first in the view, rather than index 0. Any ideas? Thanks!
Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: