Angularjs+ui.bootstrap Implement picture Carousel

Original Address: http://blog.csdn.net/yateswang/article/details/47751477

<!DOCTYPE HTML>  <HTMLNg-app= "MYAPP"Lang= "en">  <Head>      <MetaCharSet= "UTF-8">      <title>AngularJS Carousel</title>      <Linkhref= "Https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"rel= "stylesheet">      <Scriptsrc= "Angular.min.js"></Script>      <Scriptsrc= "Angular-animate.min.js"></Script>      <Scriptsrc= "Ui-bootstrap.min.js"></Script>      <Scriptsrc= "Ui-bootstrap-tpls.min.js"></Script>  </Head>  <Body>      <DivNg-controller= "Carouseldemoctrl">          <Divstyle= "height:305px">              <Carouselinterval= "Myinterval"No-wrap= "Nowrapslides">                  <Slideng-repeat= "Slide in slides"Active= "Slide.active">                      <imgng-src= "{{slide.image}}"style= "Margin:auto;">                      <Divclass= "Carousel-caption">                          <h4>NSFocus {{$index}}</h4>                          <P>{{Slide.text}}</P>                      </Div>                  </Slide>              </Carousel>          </Div>      </Div>      <Script>Angular.module ('myApp', ['Ui.bootstrap', 'nganimate']). Controller ('Carouseldemoctrl', function($scope) {$scope. Myinterval=  -; $scope. Nowrapslides= false; varSlides=$scope. Slides= []; $scope. Addslide= function () {                  varNewwidth=  - +Slides.length+ 1; Slides.push ({image:'http://steamcommunity-a.akamaihd.net/economy/image/ U8721vm9p9c2v1o6ckj4qengqne7iotqgzi-vtdwytbeimacioxxpgk8bpesly9ppjivb5iww2-452kam8helsrglegarrbbwe94ofeh0bolalopvovpawe3g ekagj6uluupkvhtyz0pixzzk5gy59xswj95soixsbcujg/1280x800', Text:'NSFocus',                  }); Slides.push ({image:'http://steamcommunity-a.akamaihd.net/economy/image/ u8721vm9p9c2v1o6ckj4qengqne7iotqgzi-vtdwytbeimacioxxpgk8bpesly9ppjivb5iww2-452kam8helsrglegarrbbwe94pqyvguspxfvwv-urad3mg bhrgzaceuqqk1bln5ircuvxlp8d5t8bx595sokdq0cmpw/1280x800', Text:'NSFocus',                  }); Slides.push ({image:'http://cdn.steamcommunity.com/economy/image/ U8721vm9p9c2v1o6ckj4qengqne7iotqgzi-vtdwytbeimacioxxpgk8bpesly9ppjivb5iww2-452kam8helsrglegarrbbwe94pqurgrsta1tw6ozbxgtgh 0fq1j-weoeskquxycyui02hkpgyunzrw595solioa6j6w/1280x800', Text:'NSFocus',                  }); Slides.push ({image:'http://steamcommunity-a.akamaihd.net/economy/image/ u8721vm9p9c2v1o6ckj4qengqne7iotqgzi-vtdwytbeimacioxxpgk8bpesly9ppjivb5iww2-452kam8helsrglegarrbbwe94aqaq0-t4cvtyvleuv2c1f 0ju3motfrqqwlm0mcz9cbv0yckdvnxtuj95soid8xos5w/1280x800', Text:'NSFocus',                  });              };          $scope. Addslide ();      }); </Script>  </Body>  </HTML>  

Angularjs+ui.bootstrap Implement picture Carousel