I am looking to use the Angular Bootstrap Carousel Directive in an application I am building.
I am able to implement it just fine, but the transition isn't working how it shows in the documentation. What should be happening is the old image slides out to the left, with the new image sliding in from the right.
I also noticed that if you hit 'Edit Plunkr' to see the code they used, it is strangely enough doing the same thing I am seeing on my local implementation.
Direct code taken from their documentation below:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function($scope) {
$scope.myInterval = 5000;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: 'http://placekitten.com/' + newWidth + '/300',
text: ['More', 'Extra', 'Lots of', 'Surplus'][slides.length % 4] + ' ' + ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
</div>
</body>
</html>
What I am seeing is that it just switches to the new image, no slide, no nothing.
What is the missing piece here? Is it a bug, or something else?
You are missing the angular animate module. You need to add it to your scripts list:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.min.js"></script>
and then into your module like this:
angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngAnimate']);
Here is a fork of the plunker with nganimate added in: http://plnkr.co/edit/E7j7KiZmCzIg629vWTnt?p=preview
Related
Swipe is not working in Carousel in ui-bootstrap v2.1.4 whereas it is working fine with v1.3.3
Is it any syntax change in new version that is causing error?
OR is it a bug in UI-Bootstrap?
Carousel docs mention that swipe is supported.
The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the ngTouch module as a dependency.
Plunker: https://plnkr.co/edit/odlDYR?p=preview
(For ease of swiping, plunker can be opened on mobile with QR code.)
var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngTouch', 'ngSanitize', 'ui.bootstrap']);
app.controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 0;
$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: '//unsplash.it/' + 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();
}
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-touch.js"></script>
<!-- v1.3.3 swipe works; v2.1.4 swipe does not work -->
<!--<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>-->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.4.js"></script>
<script src="carousel.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Contrary to docs, Swipe is not supported in Carousel from v2.0.0 till v2.1.4 (at least)
It is mentioned is in changelog
carousel: Due to the removal of replace: true, this causes a slight HTML structure change to the carousel and the slide elements - see documentation demos to see how it changes. This also caused removal of the ngTouch built in support - if one is using ng-touch, one needs to add the ng-swipe-left and ng-swipe-right directives to the carousel element with relevant logic.
To enable swipe, specify a custom template using template-url and use ng-swipe-* directives there. E.g.
<div class="carousel-inner"
ng-swipe-left="$parent.vm.next()"
ng-swipe-right="$parent.vm.prev()"
ng-transclude>
</div>
Ref: https://github.com/angular-ui/bootstrap/issues/6277
Try this
Another approach where we change the active slide scope variable.
Using
Angular 1.6.6
ngTouch 1.6.6
UI Bootstrap 2.5.0
Template
<div uib-carousel active="active" class="carousel-inner" role="listbox" interval="myInterval" no-wrap="noWrapSlides"
ng-swipe-left="changeSlide('left')"
ng-swipe-right="changeSlide('right')">
<div uib-slide ng-repeat="slide in slides" class="wrapper">
<div style="position:relative;">
<img class="img-responsive" ng-src="{{slide.url}}"></div>
</div>
</div>
</div>
</div>
Controller
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
$scope.slides = [{url: 'image1.jpeg'},{url: 'image2.jpg'}];
$scope.changeSlide = function (direction) {
var index = $scope.active;
if (direction === 'right') {
$scope.active = (index <= 0 ? 0 : index - 1);
return;
}
if (direction ==='left') {
$scope.active = (index >= ($scope.slides.length - 1) ? ($scope.slides.length - 1) : index + 1);
return;
}
};
My drag and drop is not working. Can anyone tell me what wrong in it?
html link:
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">
</script>
<script src="components/angular-dragdrop/src/angular-dragdrop.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-app="myModule" ng-controller="myController">
<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}}
</div>
<div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" jqyoui-droppable style='height:100px; margin-top:40px;border-color:green;'>
<div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list2.title">{{list2.title}}
</div>
</div>
</body>
Angular code:
var myApp = angular.module("myModule",[]);
myApp.controller("myController", function($scope){
$scope.list1 = {title: 'AngularJS - Drag Me'};
$scope.list2 = {};
});
Register the angular-drag-and-drop module in your app:
var myApp = angular.module("myModule", ['ang-drag-drop']);
myApp.controller("myController", function($scope){
$scope.list1 = {title: 'AngularJS - Drag Me'};
$scope.list2 = {};
});
I came across three show-stoppers when I tried to make this work:
First, verify that the path to the component actually exists. On my machine, at least, Bower installs to ./bower_components/, not ./components/.
Simo Endre is right that the component needs to be registered, but it needs to be registered as ngDragDrop, not ang-drag-drop.
Finally, the component in question (codef0rmer/angular-dragdrop) relies on jQuery and jQuery-UI to do its magic, so you'll need to add them to your project:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
...
</head>
Not sure if this last one is a deal-breaker for you, given the title of your question. ¯_(ツ)_/¯
Anyway, after making those changes the code seems to work as intended.
I follwed steps for drag-drop in angular JS on How to Create simple drag and Drop in angularjs but geting below error.
Please let me know what I am missing.
*
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=angular-starter&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0%3Dui.router%26p1
*
My index.html is below:
*<html ng-app="angular-starter">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angular-drag-and-drop-lists.js"></script>
<script src="app.js"></script>
<body>
<div class="row">
<div ng-repeat="(listName, list) in models.lists" class="col-md-6">
<ul dnd-list="list">
<li ng-repeat="item in list"
dnd-draggable="item"
dnd-moved="list.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}"
draggable="true">{{item.label}}</li>
</ul>
</div>
</div>
</body>
</html>
*
and app.js is
*
var app = angular.module('angular-starter', [
'ui.router',
'dndLists' ]); app.controller('MainCtrl', function($scope){
$scope.models = {
selected: null,
lists: {"A": [], "B": []}
};
// Generate initial model
for (var i = 1; i <= 3; ++i) {
$scope.models.lists.A.push({label: "Item A" + i});
$scope.models.lists.B.push({label: "Item B" + i});
}
// Model to JSON for demo purpose
$scope.$watch('models', function(model) {
$scope.modelAsJson = angular.toJson(model, true);
}, true); });
*
I think you didn't add a link to ui-router in your index.html, that might be where the error comes from.
Try to add :
<script src="your/path/to/angular-ui-router/release/angular-ui-router.min.js"></script>
just after this
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angular-drag-and-drop-lists.js"></script>
<script src="app.js"></script>
I hope it'll help you.
I found solution to this, it was not working while I was trying to run it from folder. I put it in MAMP and it worked. Maybe something to do with angular module that is involved in this.
I am trying to use the angular-ui bootstrap carousel (reference at http://angular-ui.github.io/bootstrap/). My problem is that the transition does not work, the image just appear/disappear instead of moving from right to left as the demo.
I am using Chrome version 43.0
HTML:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
Testing
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<carousel interval="myInterval" no-wrap="noWrapSlides">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="noWrapSlides">
Disable Slide Looping
</label>
</div>
</div>
<div class="col-md-6">
Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
<br />Enter a negative number or 0 to stop the interval.
</div>
</div>
</div>
</body>
</html>
The example.js:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: '//placekitten.com/' + newWidth + '/300',
text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
});
};
for (var i=0; i<4; i++) {
$scope.addSlide();
}
});
Many thanks
The solution is to add ng-animate as a dependency. Like this:
angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngAnimate']);
You need to link to the script as well of course.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.js"></script>
Here is a Plunker where it is working (not from me though).
However, adding ngAnimate as a dependency might also break your slider/carousel - Catch 22!
If that happens, read this thread and try using a different Angular version.
EDIT: using version 1.3.13 of both Angular and ng-Animate works for me - just tried it in a project - whereas using a version mismatch does not work.
<body ng-app="myApp">
<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<img src="../images/ship.png" />
</div>
<div class="slider-content" ng-switch-when="2">
<img src="../images/cargo.png" />
</div>
<div class="slider-content" ng-switch-when="3">
<img src="../images/lake.png" />
</div>
<div class="slider-content" ng-switch-when="4">
<img src="../images/cargo2.png" />
</div>
</div>
<script>
var app = angular.module('myApp', ['angular-responsive']);
app.controller('slideShowController', function($scope, $timeout) {
//function slideShowController($scope, $timeout) {
var slidesInSlideshow = 4;
var slidesTimeIntervalInMs = 3000;
$scope.slideshow = 1;
var slideTimer =
$timeout(function interval() {
$scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
slideTimer = $timeout(interval, slidesTimeIntervalInMs);
}, slidesTimeIntervalInMs);
});
</script>
</body>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-responsive/src/responsive-directive.js"></script>
<script src="../bower_components/script.js"></script>
<link rel="stylesheet" href="../bower_components/style2.css" />
<link href="../bower_components/style3.css" rel='stylesheet' type='text/css'>
I need Images slider plugin in angular js. It must work both desktop and mobile. Can you please send one example for Image slider Angular JS.
This is the code I am using. Here I slide function is working. But no responsive. For mobile view it is working.
You can look into this library.
It's an Angular carousel, which is swipable (for mobile) but can also be used with regular navigation for desktop.
You can try with this: https://github.com/thenikso/angular-flexslider
But please keep in mind you should try something yourself, post your code and then you will (probably) receive an answer. Don't ask for the full code.
You can look this : http://jsfiddle.net/4m8pppyy
<div ng-controller="MyCtrl"> <div class="company-slide-outer"><company-project-directive></company-project-directive></div>