javascript - AngularJs Bootstrap carousel does not work -
i trying use bootstrap carousel create slideshow of images on mobile application, not work , have no errors.
html
<ion-content ng-controller="valuescontroller" style="margin-top: 25px" id="controls"> <div> <carousel interval="carouseltimer"> <slide ng-repeat="slide in slides" active="slide.active"> <img ng-src="{{slide.image}}"> <div class="carousel-caption"> <h4>{{slide.cap}}</h4> </div> </slide> </carousel> </div>
js
angular.module('starter.valuescontroller', ['ui.bootstrap']) .controller("valuescontroller", function ($scope) { $scope.carouseltimer = 5000; $scope.slides = [ { image: 'http://www.halston.com/files/6514/5150/2738/hh-slider-001-saleonsale-20160101.jpg', cap: 'caption goes here' }, { image: 'http://www.halston.com/files/7514/5179/4608/hh-slider-001-winterfresh-20151229-5.jpg', cap: 'caption goes here' }, { image: 'http://www.halston.com/files/6514/5150/2738/hh-slider-001-saleonsale-20160101.jpg', cap: 'caption goes here' }, { image: 'http://www.halston.com/files/7514/5179/4608/hh-slider-001-winterfresh-20151229-5.jpg', cap: 'caption goes here' } ]; });
and in index file made sure include:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
the images displayed 1 below another.. can tell me doing wrong? thank you
Comments
Post a Comment